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

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

/sf/answers/1482031631/

.filter('inArray', function($filter){
    return function(list, arrayFilter, element){
        if(arrayFilter){
            return $filter("filter")(list, function(listItem){
                return arrayFilter.indexOf(listItem[element]) != -1;
            });
        }
    };
});