AngularJs Wie kann ngRepeat mit anderen Array-Elementen gefiltert werden?

Question

Gibt es eine Option zum Filtern von $scope.items, in der ID im Array $scope.myitems vorhanden sind?

ng-repeat="item in items | filter:{item.id == myitems} 

Demo: 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

Ihr Problem ist, dass Sie ein Spiel auf einem Unter Eigenschaft des Objekts zu erhalten versuchen (n) Iterieren sind Über.

Aus der Dokumentation:

Beachten Sie, dass eine benannte Eigenschaft Eigenschaften auf dem gleichen Niveau entsprechen, werden nur, während die speziellen $ Eigenschaft Eigenschaften auf der gleichen Ebene übereinstimmen oder tiefer. Z.B. Ein Array-Element wie {name: {first: 'John', last: 'Doe'}} wird nicht mit {name: 'John'} verglichen, sondern mit {$: 'John'} verglichen.

Ich würde empfehlen, dass Sie Ihren kundenspezifischen Filter machen. Ich habe Ihren Code durch die Implementierung von benutzerdefinierten Filter, Arbeitskopie Ihrer Anforderung geändert.

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

Gesamten Plunker hier https://codepen.io/anon/pen/PPNJLB

Answer 2

Verwenden Sie diese hervorragende Filter aus dieser Antwort:

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

Nur für einige Hinweis. Hope hilft

Answer 4

Tha oben Beispiel von Kashif Mustafa perfekt funktioniert. Die einzige Änderung, die wir tun mussten, ist, analysieren Sie die IDs in ganze Zahlen von String.

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