你如何从 AngularJS ng-repeat 中排除项目答案

【问题标题】：How do you exclude items from AngularJS ng-repeat你如何从 AngularJS ng-repeat 中排除项目
【发布时间】：2015-02-09 03:36:44
【问题描述】：

是否可以排除 ng-repeat 中的项目？

例如，我有类似以下的内容（简化以保持简短）：

<div class="row" data-ng-repeat="entry in data.feed.entry | orderBy:'gsx$timestamp.$t':true">
{{entry.gsx$jobID.$t}}
</div>

我有另一个名为 exclusionData 的范围对象，其结构类似。我想排除我的第一个 ng-repeat 中出现在 exclusionData.feed.entry.gsx$jobID.$t 中的任何项目

或者有没有更简单的方法可以在我的控制器中执行此操作（即立即排除数据）？数据和排除数据都来自两个不同的 JSON 提要。

【问题讨论】：

你应该使用filter

标签： javascript json angularjs angularjs-ng-repeat

【解决方案1】：

这将排除匹配的数据，只需添加一个 ng-if，并添加一个 bang 以使其虚假。

<div 
    class="row"
    data-ng-repeat="(key, entry) in data.feed.entry | orderBy:'gsx$timestamp.$t':true"
    ng-if="!exclusionData.feed[key]gsx$jobID.$t">
    {{entry.gsx$jobID.$t}}
</div>

【讨论】：

【解决方案2】：

您可以使用如下所示的过滤器，也可以只使用 ng-if/ng-show

<div class="row" data-ng-repeat="entry in data.feed.entry | orderBy:'gsx$timestamp.$t':true | filter: {gsx$exlucde.$t: true}">
{{entry.gsx$jobID.$t}}
</div>

data.feed.entry = [{
    gsx$jobID.$t: 'something',
    gsx$exlucde.$t: true,
    gsx$timestamp.$t: '1/1/1990'
}]

【讨论】：

我在想这个，但是 excludeData 是一个不同的对象。例如 data.feed.entry 中的条目与 excludeData.feed.entry 中的条目
您可以编写一个函数来遍历排除数据并将其添加到 data.feed.entry 数据中，或者您可以只使用 ng-if 来检查数据是否被排除
不，我的代码不依赖于它是连续的，它只是恰好是我想到的占位符数据。我的代码唯一依赖的是排除的数据是一个数组，并使用 indexOf 方法检查它是否存在。如果您不是这种情况，那么您可以更改搜索功能。

【解决方案3】：

最简单的方法是在重复中使用过滤器指令，但您也可以在控制器中执行此操作。

这取决于从 OO 设计角度看您的应用程序的外观。

【讨论】：

【解决方案4】：

您可以像这样创建过滤器：

angular.module('appFilters', []).filter('yourFilterName', function() {
    return function(input, key) {          
      var myList = [];
      for(var i = 0; i < input.length; i++){
        var found = _.find($scope.exclusionData, function() { // You can replace this with your own function.
          // Your own logic here    
        });

        if(found){              
          myList.push(input[i]);
        }
      }
      return myList;
    };
  });

我假设您的项目中包含下划线，但您可以实现自己的搜索功能。

在您的模板中，您可以像这样传递过滤器：

<div class="row" data-ng-repeat="entry in data.feed.entry | yourFilterName | orderBy:'gsx$timestamp.$t':true">
  {{entry.gsx$jobID.$t}}
</div>

【讨论】：