javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 11:41:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

Updating search-bar basic demo to show the detectchanges from angular firing 1000's of times

Browse Source
This commit is contained in:
jbavari
2015-10-13 11:56:53 -06:00
parent 0ca3ec6555
commit bb49c9f114
3 changed files with 12 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
ionic/components/search-bar/search-bar.ts
View File

@ -92,6 +92,7 @@ export class SearchBar extends Ion {
} }
inputChanged(event) { inputChanged(event) {
console.log('input changed');
this.writeValue(event.target.value); this.writeValue(event.target.value);
this.onChange(event.target.value); this.onChange(event.target.value);
} }

11
ionic/components/search-bar/test/basic/index.ts
View File

@ -17,9 +17,7 @@ function randomTitle() {
class IonicApp { class IonicApp {
constructor() { constructor() {
var fb = new FormBuilder(); var fb = new FormBuilder();
this.form = fb.group({ this.searchQuery = '';
searchQuery: ['', Validators.required]
});
this.items = [] this.items = []
for(let i = 0; i < 100; i++) { for(let i = 0; i < 100; i++) {
@ -29,8 +27,13 @@ class IonicApp {
} }
} }
doThis() {
console.log('Doing this');
}
getItems() { getItems() {
var q = this.form.controls.searchQuery.value; var q = this.searchQuery;
console.log('Its changing');
if(q.trim() == '') { if(q.trim() == '') {
return this.items; return this.items;
} }

8
ionic/components/search-bar/test/basic/main.html
View File

@ -2,15 +2,15 @@
<!-- <ion-view nav-title="Search Bar"> --> <!-- <ion-view nav-title="Search Bar"> -->
<ion-content> <ion-content>
<form [ng-form-model]="form"> <!-- <form [ng-form-model]="form"> -->
<ion-search-bar ng-control="searchQuery"></ion-search-bar> <ion-search-bar [(ng-model)]="searchQuery"></ion-search-bar>
<ion-list inset #list> <ion-list inset #list>
<ion-item *ng-for="#item of getItems()"> <ion-item-sliding *ng-for="#item of getItems()" (click)="doThis">
{{item.title}} {{item.title}}
</ion-item> </ion-item>
</ion-list> </ion-list>
</form> <!-- </form> -->
</ion-content> </ion-content>
<!-- </ion-view> --> <!-- </ion-view> -->