Javascript AngularJs 如何用另一个数组元素过滤 ngRepeat
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32638037/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJs How to filter ngRepeat with another array elements
提问by Mo.
Is there any option to filter from $scope.itemswhere the IDexist in the array $scope.myitems?
是否有任何选项可以从数组中存在ID 的$scope.items位置进行过滤？$scope.myitems
ng-repeat="item in items | filter:{item.id == myitems}
Demo: http://codepen.io/anon/pen/rOeGYB
演示：http: //codepen.io/anon/pen/rOeGYB
angular.module('myapp', [])
.controller("mycontroller", function($scope) {
$scope.items = [
{
"id": 1,
"name": "Melodie"
}, {
"id": 2,
"name": "Chastity"
}, {
"id": 3,
"name": "Jescie"
}, {
"id": 4,
"name": "Hamish"
}, {
"id": 5,
"name": "Germaine"
}, {
"id": 6,
"name": "Josephine"
}, {
"id": 7,
"name": "Gail"
}, {
"id": 8,
"name": "Thane"
}, {
"id": 9,
"name": "Adrienne"
}, {
"id": 10,
"name": "Geoffrey"
}, {
"id": 11,
"name": "Yeo"
}, {
"id": 12,
"name": "Merrill"
}, {
"id": 13,
"name": "Hoyt"
}, {
"id": 14,
"name": "Anjolie"
}, {
"id": 15,
"name": "Maxine"
}, {
"id": 16,
"name": "Vance"
}, {
"id": 17,
"name": "Ashely"
}, {
"id": 18,
"name": "Dominic"
}, {
"id": 19,
"name": "Cora"
}, {
"id": 20,
"name": "Bo"
}
];
$scope.myitems = ['0', '3', '6', '10', '19']
});<link href="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></link>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="mycontroller" class="container">
<h4>My items</h4>
<ul class="list-group">
<li class="list-group-item" ng-repeat="item in items | filter:{}">{{item.name}}</li>
</ul>
<h4>Total items</h4>
<ul class="list-group">
<li class="list-group-item" ng-repeat="item in items">{{item.name}}</li>
</ul>
</div>回答by Kashif Mustafa
Your problem is that you are trying to get a match on a sub-property of the object(s) you are iterating over.
您的问题是您正试图在要迭代的对象的子属性上进行匹配。
From the docs:
从文档：
Note that a named property will match properties on the same level only, while the special $ property will match properties on the same level or deeper. E.g. an array item like {name: {first: 'John', last: 'Doe'}} will not be matched by {name: 'John'}, but will be matched by {$: 'John'}.
请注意，命名属性将仅匹配同一级别的属性，而特殊的 $ 属性将匹配同一级别或更深层次的属性。例如，像 {name: {first: 'John', last: 'Doe'}} 这样的数组项不会被 {name: 'John'} 匹配，但会被 {$: 'John'} 匹配。
I would recommend you will make your custom filter. I have changed your code by implementing custom filter, working copy of your requirement.
我建议您制作自定义过滤器。我通过实现自定义过滤器，您的要求的工作副本来更改您的代码。
<li class="list-group-item" ng-repeat='item in items | customArray:myitems:"id"'>{{item.name}}</li>
See complete plunker here https://codepen.io/anon/pen/PPNJLB
在此处查看完整的 plunker https://codepen.io/anon/pen/PPNJLB
回答by Moncef Hassein-bey
Use this excellent filter from this answer :
从这个答案使用这个优秀的过滤器：
https://stackoverflow.com/a/21171880/2419919
https://stackoverflow.com/a/21171880/2419919
.filter('inArray', function($filter){
return function(list, arrayFilter, element){
if(arrayFilter){
return $filter("filter")(list, function(listItem){
return arrayFilter.indexOf(listItem[element]) != -1;
});
}
};
});
回答by Syed Ekram Uddin
angular.forEach($scope.items, function (v, k) {
console.log($scope.myitems[v.id - 1]);
$scope.myitems[v.id- 1].name = v.name;
}, $scope.myitems);
Just for some hint. Hope helps
只是为了一些提示。希望有帮助
回答by Neelima Ediga
Tha above example given by Kashif Mustafa perfectly works. The only change we had to do is, parse the ids into integers from string.
上面由 Kashif Mustafa 给出的例子非常有效。我们唯一要做的改变是，将 id 从字符串解析为整数。
cshtml:
cshtml：
<div ng-repeat="e in AllEntities | customArray:SelectedEntities:'id'">{{ e.label }}</div>
controller:
控制器：
var eIds = detail.entityIds;
var eArray = eIds.split(",");
if (eArray.length > 0) {
$scope.showEntities = true;
$scope.showNone = false;
for (var i = 0; i < eArray.length; i++) {
$scope.SelectedEntities.push(parseInt(eArray[i]));
}
}
filter:
筛选：
(your controller).filter('customArray', function ($filter) {
return function (list, arrayFilter, element) {
if (arrayFilter) {
return $filter("filter")(list, function (listItem) {
return arrayFilter.indexOf(listItem[element]) != -1;
});
}
};
});
