AngularJs如何用其他数组元素过滤ngRepeat
AngularJs How to filter ngRepeat with another array elements
如果数组$scope.myitems
中存在ID,是否有从$scope.items
筛选的选项?
ng-repeat="item in items | filter:{item.id == myitems}
演示: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>
您的问题是,您试图在要迭代的对象的子属性上获得匹配。
来自文档:
请注意,命名属性将与同一级别上的属性匹配只有,而特殊的$属性将与相同的属性匹配水平或更深。例如,数组项,如{name:{first:'John',last:"Doe"}}将不由{name:"John"}匹配,而是由匹配{$:"John"}。
我建议您制作自定义过滤器。我已经通过实现自定义过滤器更改了您的代码,这是您需求的工作副本。
<li class="list-group-item" ng-repeat='item in items | customArray:myitems:"id"'>{{item.name}}</li>
在此处查看完整的plunkerhttps://codepen.io/anon/pen/PPNJLB
使用这个答案中的优秀过滤器:
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;
});
}
};
});
angular.forEach($scope.items, function (v, k) {
console.log($scope.myitems[v.id - 1]);
$scope.myitems[v.id- 1].name = v.name;
}, $scope.myitems);
只是为了一些提示。希望帮助
Kashif Mustafa给出的上述例子非常有效。我们所要做的唯一更改是,将id解析为字符串中的整数。
cshtml:
<div ng-repeat="e in AllEntities | customArray:SelectedEntities:'id'">{{ e.label }}</div>
控制器:
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]));
}
}
过滤器:
(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;
});
}
};
});
相关文章:
- 有可能过滤来自嵌入式YouTube的声音吗
- 如何使用ngrepeat和双向绑定获得指令的隔离范围
- 为什么我的d3.jsselectAll+过滤器没有过滤
- 如何将ngrepeat下的ngmodel绑定到$scope
- Angular ngRepeat:重复错误(尽管没有重复的密钥)
- ui网格日期单元格过滤器,过滤日期格式导致显示错误的日期
- Angular:使用选择列表选择过滤代码中的对象
- 在单击时过滤 JSON
- 如何在BookshelfJS中通过加入来过滤结果
- 如何按对象反转Angular ngRepeat的顺序's键,这些键是数字键
- 如何使用javascript过滤复杂的json对象
- 如何应用带过滤器的ng if来过滤记录,并在同一页面中显示两个不同的视图
- 过滤AngularJs中的数据
- 自动完成jquery;t使用ngmodel和ngrepeat(angular)
- Angularjs-我们如何观察ngRepeat中的动态元素,以及动态ng模型名称和ANY更改时的过滤元素值
- AngularJS对ngRepeat对象的高级自定义过滤
- AngularJS对没有键的项进行ngRepeat过滤
- AngularJs如何用其他数组元素过滤ngRepeat
- 无法在控制器上访问ngRepeat的过滤结果
- 无法在ngRepeat - AngularJS中引用过滤数组