如何在Angular中使用NOT IN另一个数组中的值过滤ng-repeat?

时间:2017-02-20 11:14:47

标签: javascript angularjs arrays angular-filters

有没有办法使用Angular过滤器将值与数组中的每个值进行比较?

<Grid Margin="3">
    <Rectangle  Name="Rect"
    Fill="LightGray"
    AllowDrop="True"
    Stroke="#FF000000"
    StrokeThickness="2" 
    StrokeDashArray="5 4"
    SnapsToDevicePixels="True"
    MinHeight="200"
    MinWidth="200"
    >
        <Rectangle.Triggers>
            <EventTrigger RoutedEvent="Window.Loaded">
                <BeginStoryboard>
                    <Storyboard >
                        <DoubleAnimation To="100" Duration="0:0:10" RepeatBehavior="Forever" By="1" 
                 Storyboard.TargetProperty="StrokeDashOffset" Storyboard.TargetName="Rect"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Rectangle.Triggers>
    </Rectangle>
</Grid>

我想显示Categories: <span ng-repeat="c in i.categories | filter: '!'+'myArray' ">{{c}}</span> 中不在i.categories中的值

myArray

我希望$scope.i = { categories: [ "Europe & Eurasia", "Featured", "Headlines", "Middle East", "News", "NEWS BY TOPIC", "News Categories", "REGIONAL NEWS" ] }; $scope.myArray = ['Featured', 'Headlines', 'News']; 中包含 c内的所有内容。

我尝试过编写一些函数,但由于请求很多,我的应用程序速度非常慢。

那么,我可以以某种方式传递我的数组,让Angular遍历该数组中的每一项并将其与当前值进行比较吗?

2 个答案:

答案 0 :(得分:4)

您可以尝试使用自定义过滤器,如下所示:

angular.module('myApp', []).filter('notInArray', function($filter) {
    return function(list, arrayFilter) {
        if(arrayFilter) {
            return $filter("filter")(list, function(listItem) {
                return arrayFilter.indexOf(listItem) == -1;
            });
        }
    };
});

像这样使用:

<div ng-repeat='c in i.categories | notInArray:myArray'>{{c}}</div>

JSFiddle demo

&#13;
&#13;
angular.module('Test', []).filter('notInArray', function($filter) {
    return function(list, arrayFilter) {
        if(arrayFilter) {
            return $filter("filter")(list, function(listItem) {
                return arrayFilter.indexOf(listItem) == -1;
            });
        }
    };
});

function Ctrl($scope) {
  $scope.i = {categories: [
      "Europe & Eurasia",
      "Featured",
      "Headlines",
      "Middle East",
      "News",
      "NEWS BY TOPIC",
      "News Categories",
      "REGIONAL NEWS"
  ]};
  
  $scope.myArray = ['Featured', 'Headlines', 'News'];
}
&#13;
<!DOCTYPE html>
<html ng-app='Test'>
<head>
  <script src="http://code.angularjs.org/1.1.1/angular.min.js"></script>
  <meta charset=utf-8 />
</head>
<body ng-controller='Ctrl'>
  <div ng-repeat='c in i.categories | notInArray:myArray'>{{c}}</div>
</body>
</html>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

您也可以这样使用。

angular.module('App.filters', []).filter('companyFilter', [function () {
    return function (arr, selArr) {
      var retArr = [];
        angular.forEach(arr, function(v, k){
      var found =0;
            for(var i=0; i<selArr.length; i++){
            if(selArr[i] == v.name){
                    found = 1;
                break;
            }
          }
          if(found == 0){
            retArr.push(v);
          }
      })
      return retArr;
    };
}]);

<div ng-controller="MyCtrl">
  <div ng-repeat="c in categories|filter:customFilter">
{{c}}
  </div>
</div>