AngularJS过滤器隐藏项目,如果它存在于另一个数组中

时间:2015-08-06 19:54:22

标签: javascript angularjs data-binding angularjs-ng-repeat angularjs-filter

我有两个数组:

$scope.arr1 = [1, 2, 3];
$scope.arr2 = [2, 3, 4];

我试图:

  • ng-repeat through arr1
  • 使用自定义过滤器仅显示arr1中不属于arr2
  • 1
  • 输出应为<ul> <li ng-repeat="item in arr1 | matcher"> {{item}} </li> </ul>

以下是我的观点:

var app = angular.module('plunker', []);

app.filter('matcher', function () {
  for (var i = 0; i < $scope.arr1.length; i++) {
    for (var j = 0; j < $scope.arr2.length; j++) {
      if ($scope.arr1[i] != $scope.arr2[j])  {
        return $scope.arr1[i];
      }
    }
  }
});

app.controller('MainCtrl', function($scope) {
  $scope.arr1 = [1, 2, 3];
  $scope.arr2 = [2, 3, 4];
});

这是我的控制人员:

if /I %%A EQU "9"

这是我的Plunker: http://plnkr.co/edit/Pd3QwMMNfmL62vvdD1kW?p=preview

知道如何让这个自定义过滤器工作吗?

1 个答案:

答案 0 :(得分:4)

您永远不会以任何方式访问角度过滤器内的$scope,您应该将它们作为参数传递到过滤器中,然后在过滤器功能中访问它们。为了使其更清洁,您可以使用.filter&amp;在您的过滤器中.indexOf

<强> HTML

<body ng-controller="MainCtrl">
    <ul>
      <li ng-repeat="item in arr1 | matcher: arr2">
        {{item}}
      </li>
    </ul>
</body>

<强>代码

var app = angular.module('plunker', []);

app.filter('matcher', function() {
  return function(arr1, arr2) {
    return arr1.filter(function(val) {
      return arr2.indexOf(val) === -1;
    })
  }
});

app.controller('MainCtrl', function($scope) {
  $scope.arr1 = [1, 2, 3];
  $scope.arr2 = [2, 3, 4];
});

Working Plunkr