登录

javascript - angularjs 双向数据绑定问题

做一个app样式的搜索功能,默认页面列出所有内容,根据搜索框内容筛选显示符合条件的项目,
搜索框放在ion-nav-title中就不在一个controller里了,这样怎么实现搜索框内容改变,主页内容中跟着变化?
html:

<ion-view ng-controller="PlaylistsCtrl" class="app_android" hide-nav-bar="false">
    <ion-nav-title>
        <p class="search-wrap" ng-controller="searchInput">
            <p 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>
            </p>
        </p>
    </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>

# JavaScript
迷茫 迷茫 2292 天前 370 次浏览

全部回复(2) 我要回复

  • 黄舟

    黄舟2017-04-11 09:25:37

    可以把搜索框的值写在父Scope里

    <ion-view ng-controller="PlaylistsCtrl as ionView">
        ...
        <p ng-controller="searchInput">
            ...
            <input ng-model="ionView.searchInput" ...>
        </p>
        ...
    </ion-view>

    回复
    0
  • PHPz

    PHPz2017-04-11 09:25:37

    在PlaylistsCtrl里边加$on的监听事件,名字自己想一个。事件的里边写参数,回调函数。函数给一个变量赋值,然后把这个变量作为你的过滤器参数。然后在searchInput(controller命名不清晰)中ng-change方法中用$emit来触发之前定义好的监听事件,把searchInput(参数和controller重名了)作为参数传给监听事件。
    如果不清晰可以查下angular 监听,很简单,用这里正合适。变量命名呀,这是硬伤,一定要改。

    回复
    0
  • 取消 回复 发送