diff --git a/ionic/components/app/test/sink/index.js b/ionic/components/app/test/sink/index.js index b36bd77a15..a2cd7fa935 100644 --- a/ionic/components/app/test/sink/index.js +++ b/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 }, diff --git a/ionic/components/app/test/sink/pages/table-search.js b/ionic/components/app/test/sink/pages/table-search.js new file mode 100644 index 0000000000..3616094fe1 --- /dev/null +++ b/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: ` + Table Search + + +
+ + + + + + + {{item.title}} + + +
+
+ `, + 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; + }) + } +}