AngularJS 如果项目存在于另一个数组中则过滤隐藏项目
AngularJS Filter Hide Item If It Exists In Another Array
我有两个数组:
$scope.arr1 = [1, 2, 3];
$scope.arr2 = [2, 3, 4];
我正在尝试:
- ng-重复
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];
});
这是我的 Plunker:
http://plnkr.co/edit/Pd3QwMMNfmL62vvdD1kW?p=preview
知道如何让这个自定义过滤器工作吗?
您永远不会以任何方式在 angular 过滤器中访问 $scope
,您应该将它们作为参数传递到过滤器中,然后在过滤器函数中访问它们。为了使其更清洁,您可以在过滤器中使用 .filter
& .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];
});
我有两个数组:
$scope.arr1 = [1, 2, 3];
$scope.arr2 = [2, 3, 4];
我正在尝试:
- ng-重复
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];
});
这是我的 Plunker: http://plnkr.co/edit/Pd3QwMMNfmL62vvdD1kW?p=preview
知道如何让这个自定义过滤器工作吗?
您永远不会以任何方式在 angular 过滤器中访问 $scope
,您应该将它们作为参数传递到过滤器中,然后在过滤器函数中访问它们。为了使其更清洁,您可以在过滤器中使用 .filter
& .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];
});