如何在ng-repeat上使用多个过滤器

时间:2017-06-15 20:01:22

标签: angularjs

我目前有一个工作的转发器,它将每个页面的字段放在适当的页面上。

<div ng-repeat="p in model.pages">
    <div ng-repeat="f in model.fields | filter: { pageNumber: p.pageNumber }:true">
        <div class="pdf-field">{{f.value}}</div>
    </div>
</div>

但是,我需要它来过滤掉任何不具有isTask属性或属性等于false的字段。下面的代码会杀死整个转发器并且不包含任何内容。

<div ng-repeat="p in model.pages">
    <div ng-repeat="f in model.fields | filter: { pageNumber: p.pageNumber }:true | filter: { isTask: true }">
        <div class="pdf-field">{{f.value}}</div>
    </div>
</div>

2 个答案:

答案 0 :(得分:2)

您可以将它们合并为单个过滤器object

ng-repeat="f in model.fields | filter: { pageNumber: p.pageNumber, isTask: true }"

相反,更好的方法是在控制器端进行一次此过滤。这样应用程序将更具性能。

model.pages.filter(function(page){
   page.fields = model.fields.filter(function(field){
      return field.pageNumber === page.pageNumber && field.isTask;
   });
   return page.fields.length;
});

<div ng-repeat="p in model.pages">
    <div ng-repeat="f in p.fields">
        <div class="pdf-field">{{f.value}}</div>
    </div>
</div>

答案 1 :(得分:1)

如何使用ngIf

<div ng-repeat="p in model.pages">
    <div ng-repeat="f in model.fields | filter: { pageNumber: p.pageNumber }:true" ng-if="isTask=true">
        <div class="pdf-field">{{f.value}}</div>
    </div>
</div>