Table Search Sink

ionic/components/app/test/sink/index.js

@@ -15,6 +15,7 @@ import {CardPage} from './pages/card'
 import {FormPage} from './pages/form'
 import {SegmentPage} from './pages/segment'
 import {SearchBarPage} from './pages/search-bar'
+import {TableSearchPage} from './pages/table-search'
 import {IconsPage} from './pages/ionicons'
 import {TabsPage} from './pages/tabs'
 import {AsidePage} from './pages/aside'
@@ -43,6 +44,7 @@ export class IonicApp {
       { title: 'Forms', component: FormPage },
       { title: 'Segments', component: SegmentPage },
       { title: 'Search Bar', component: SearchBarPage },
+      { title: 'Table Search', component: TableSearchPage },
       { title: 'Icons', component: IconsPage },
       { title: 'Tabs', component: TabsPage },
       { title: 'Aside', component: AsidePage },

ionic/components/app/test/sink/pages/table-search.js

@@ -0,0 +1,71 @@
+import {NgFor, DynamicComponentLoader, Injector, DomRenderer, ElementRef} from 'angular2/angular2';
+import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
+import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {View} from 'angular2/src/core/annotations_impl/view';
+import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
+
+import {Segment, SegmentButton, SearchBar, List, Item, ActionMenu, Modal, ModalRef,
+  NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic';
+
+  console.log(NavbarTemplate, Navbar, Content, formDirectives);
+
+function randomTitle() {
+  var items = ['Pizza', 'Pumpkin', 'Apple', 'Bologna'];
+  return items[Math.floor(Math.random() * items.length)];
+}
+
+@Component({
+  selector: 'ion-view',
+  appInjector: [FormBuilder]
+})
+@View({
+  template: `
+  <ion-navbar *navbar><ion-title>Table Search</ion-title></ion-navbar>
+
+  <ion-content>
+    <form (^submit)="doSearch($event)" [control-group]="form">
+
+      <ion-search-bar control="searchQuery"></ion-search-bar>
+
+      <ion-list #list>
+
+        <ion-item *ng-for="#item of getItems()"><!--items | search:form.controls.searchControl.value">-->
+          {{item.title}}
+        </ion-item>
+      </ion-list>
+    </form>
+  </ion-content>
+  `,
+  directives: [formDirectives].concat([Content, NavbarTemplate, Navbar, List, Item, SearchBar, NgFor])
+})
+export class TableSearchPage {
+  constructor(formBuilder: FormBuilder) {
+    console.log('IonicApp Start')
+
+    this.form = formBuilder.group({
+      searchQuery: ['', Validators.required]
+    });
+
+
+    this.query = 'HELLO';
+
+    this.items = []
+    for(let i = 0; i < 100; i++) {
+      this.items.push({
+        title: randomTitle()
+      })
+    }
+  }
+  getItems() {
+    var q = this.form.controls.searchQuery.value;
+    if(q.trim() == '') {
+      return this.items;
+    }
+    return this.items.filter((v) => {
+      if(v.title.toLowerCase().indexOf(q.toLowerCase()) >= 0) {
+        return true;
+      }
+      return false;
+    })
+  }
+}