AngularJs如何使用其他数组元素过滤ngRepeat

Question

是否有任何选项可以过滤$scope.items ，其中ID存在于数组$scope.myitems ？

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> 

Answer 1

您的问题是您正在尝试匹配您正在迭代的对象的子属性。

来自文档：

请注意，命名属性仅匹配同一级别的属性，而特殊$属性将匹配同一级别或更深层次的属性。 例如{name：{first：'John'，last：'Doe'}}之类的数组项不会被{name：'John'}匹配，但会被{$：'John'}匹配。

我建议你制作自定义过滤器。 我已经通过实现自定义过滤器，您的需求的工作副本来更改您的代码。

<li class="list-group-item" ng-repeat='item in items | customArray:myitems:"id"'>{{item.name}}</li>

在这里查看完整的plunker https://codepen.io/anon/pen/PPNJLB

Answer 2

使用这个答案的优秀过滤器：

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;
            });
        }
    };
});

Answer 3

angular.forEach($scope.items, function (v, k) { 
   console.log($scope.myitems[v.id - 1]);
   $scope.myitems[v.id- 1].name = v.name;
}, $scope.myitems);

只是为了一些提示。 希望有所帮助

Answer 4

以上由Kashif Mustafa给出的例子非常有用。 我们必须做的唯一改变是，将字符串解析成整数。

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;
            });
        }
    };
});