做一个app样式的搜索功能,默认页面列出所有内容,根据搜索框内容筛选显示符合条件的项目,
搜索框放在ion-nav-title中就不在一个controller里了,这样怎么实现搜索框内容改变,主页内容中跟着变化?
html:
<ion-view ng-controller="PlaylistsCtrl" class="app_android" hide-nav-bar="false">
<ion-nav-title>
<div class="search-wrap" ng-controller="searchInput">
<div class="search" style="width: 100%;">
<label class="item-input">
<i class="icon ion-ios-search-strong placeholder-ion"></i>
<input type="search" placeholder="Find Doctor, Clinics, Specialist" ng-model="searchInput" ng-change="change(searchInput);">
</label>
</div>
</div>
</ion-nav-title>
<ion-content class="app_find" overflow-scroll="false">
<ion-refresher on-refresh="doRefresh();" refreshing-icon="ion-ios-eye-outline">
</ion-refresher>
<ion-list>
<ion-item ng-repeat="playlist in playlists | filter:{title:searchInput}">
</ion-item>
</ion-list>
</ion-content>
</ion-view>
AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入。AngularJS将会遍历DOM模板, 来生成相应的NG指令,所有的指令都负责针对view(即HTML中的ng-model)来设置数据绑定。因此, NG框架是在DOM加载完成之后, 才开始起作用的.
答案来源于网络
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。