Question

我正在开发一个Ionic项目，该项目的视图显示了一个带有搜索输入的可滚动列表，用于过滤显示的结果，此视图位于加载到另一个视图中的模板中。

我们注意到当滚动开始时搜索输入会与内容一起移动，当您滚动并希望过滤结果时，搜索输入就会出现问题。

我尝试通过将搜索输入拉到模板外部并将其放在父视图中加载它的位置来解决此问题。

虽然这会将搜索输入呈现在固定位置，但即使我指定了处理其逻辑的控制器，也不会在列表中应用过滤器。

以下是我的代码在父视图中的显示方式：

var filterDataAccordingToDate = function (ref, startTime, endTime) {
    var filterDataAccordingToDatePromise = new Promise( function(resolve, reject) {
        ref.orderByChild('date').startAt(startTime).endAt(endTime).once('value', function(snap) {
            filteredObj = snap.val();
            resolve(filteredObj);
        });
    });
    return filterDataAccordingToDatePromise;
};

filterDataAccordingToDate(travelRef, 1466439004, 1466439011).then(function(result){
    //this callback will be trigger when firebase call finish.
    //result is what you set on the resolve.
    console.log("DATA RETURNED: " + util.inspect(result, false, null));
});

如您所见，我将控制器<ion-popover-view id="popfecha" class="fit" > <ion-view view-title="Nuevo ReSAT"> <ion-content class="padding" data-ng-hide="activity.state.notes || activity.state.reasonShow || activity.state.product_lineShow || activity.state.account || activity.state.contact " > <form name="form" data-ng-submit="submitForm()">  </form> </ion-content> <ion-view class="wrapper" data-ng-show="activity.state.account" >  <div data-ng-controller="AccountCatalogueCtrl" class="item item-input filterSearch bar-header popupBorder borderFirstItemPopup"> <label class="item-input-wrapper"> <i class="icon ion-search placeholder-icon"></i> <input type="text" placeholder="Search" class="form-control" ng-model="filterText.name"> </label> </div>  <ion-content class="padding" data-ng-show="activity.state.account" > <div data-ng-controller="AccountCatalogueCtrl" ng-include="'templates/account-catalogue.html'"></div> </ion-content> </ion-view> <ion-content class="padding" data-ng-show="activity.state.notes" > <div data-ng-controller="ActivityNotesCtrl" ng-include="'templates/activity-notes.html'"></div> </ion-content> <ion-content class="padding" data-ng-show="activity.state.reasonShow" > <div data-ng-controller="ReasonCatalogueCtrl" ng-include="'templates/reason-catalogue.html'"></div> </ion-content> <ion-content class="padding" data-ng-show="activity.state.product_lineShow" > <div data-ng-controller="ProductLineCatalogueCtrl" ng-include="'templates/product-line-catalogue.html'"></div> </ion-content> <ion-content class="padding" data-ng-show="activity.state.contact" > <div data-ng-controller="ContactCatalogueCtrl" ng-include="'templates/contact-catalogue.html'"></div> </ion-content> </ion-view> </ion-popover-view>指定给包含搜索输入的div和加载模板AccountCatalogueCtrl的div。

这是我的模板：

account-catalogue.html

我甚至在filterText对象上放置了一个手表，看它是否正在更新，手表确实告诉我属性名称正在改变。

这是我的控制者：

<ion-list>

    <ion-radio class="item-avatar popupBorder borderLastItemPopupIterator whiteBackground" ng-repeat="acc in accountCatalogue | orderBy:'-name' : true | filter:filterText track by acc._id"
              type="item-text-wrap" ng-value="acc.name" ng-if="!acc.isDivider" ng-click="select(acc); go()" >
      <img src="img/account.png">

      <h2>{{acc.name}}</h2>

    </ion-radio>

</ion-list>
<ion-infinite-scroll
  ng-if="canLoadAccounts"
  on-infinite="loadAccounts()"
  distance="5%">
</ion-infinite-scroll>

如果我将搜索输入放在我的模板中，则应用过滤器，但是当放置在过滤器外部时，不会应用过滤器。我在实施中做错了吗？即使接收过滤器的组件位于使用过滤器的模板之外，如何确保过滤器适用？

Answer 1

我通过从搜索输入中删除控制器解决了这个问题，所以它看起来像这样：

<!-- Filter section -->

<div class="item item-input filterSearch bar-header popupBorder borderFirstItemPopup">
  <label class="item-input-wrapper">
    <i class="icon ion-search placeholder-icon"></i>
    <input type="text" placeholder="Search" class="form-control"
           ng-model="filterText.name">
  </label>
</div>
<!-- ./Filter section  -->

我看到我可以在我的控制器AccountCatalogueCtrl上访问filterText，因为显示目录的组件可以访问它所持有的父组件中的范围变量。这样我可以更改AccountCatalogueCtrl之外的值并影响列表中的过滤器。

过滤ng-repeat不适用

1 个答案: