Ionic:如何过滤索引中其他html内容的列表?

时间:2017-01-31 12:02:58

标签: ionic-framework

我是离子初学者。

我在index.html中有一个位于ion-nav-bar中的搜索文本框。我在索引中呈现enroutelist.html页面,显示数据列表。在这里,我想从index.html搜索enroutelist.html中存在的数据。因此根据我的输入,无论输入什么,它都必须过滤并显示结果。

我不知道如何将数据从索引传递到enroutelist.html,还是有其他方式可供使用?

请有人帮助我。

这是我的index.html页面

<ion-nav-bar class="bar bar-header bar-assertive" ng-controller="ManiCntrl" align-title="center">

<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
<label class="item-input-wrapper tg-header-search" ng-controller="DashCtrl">
<input id="search" type="search" placeholder="Search..."  ng-model="search.storelist.store_name">
</label>

<ion-nav-buttons side="right">
<button class="button button-clear button-positive">
    <i class="icon ion-ios-search custom-icon">
        </i>
    </button>
            <button class="button button-clear button-positive" ng-click="reset()">
    <i class="icon ion-ios-cart-outline custom-icon">
        </i>
    </button> 
    <button class="button button-clear button-positive" ng-click="reset()">
    <i class="icon ion-refresh custom-icon">
        </i>
    </button>
</ion-nav-buttons>
</ion-nav-bar>

这是我的enroutelist.html代码。

<ion-view class="enroute-view" view-title="ENROUTE">
<ion-content class="padding">
<button class="tab-btn" ng-click="listVisible()">
    <i class="ion-ios-list-outline">
        </i>
    </button>
     <button class="tab-btn">
    <i class="ion-ios-location">
        </i>
    </button>
    <br/><br/><br/>
 <ion-list ng-hide="registered">

 <ion-item class="store-item" ng-repeat="storelist in storelists">
  <span style="color: black; font-size: 16px;">{{storelist.store_name}}     </span><br/>
  <span style="font-size: 12px;">{{storelist.store_address}}</span>
  <i class="ion-ios-location custom-location">
  </ion-item>

  </ion-list>
 </ion-content>  
 </ion-view>

1 个答案:

答案 0 :(得分:0)

如果您想进行“root”搜索,可以使用$rootScope。类似的东西:

<input id="search" type="search" placeholder="Search..."
       ng-model="$root.search">

然后是页面上的其他地方:

<ion-item class="store-item" ng-repeat="storelist in storelists | $root.search">