AngularJs Come filtrare ngRepeat con altri elementi dell'array

Question

C'è qualche opzione per il filtro da $scope.items dove l'ID esiste nell'array $scope.myitems?

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

Il tuo problema è che si sta tentando di ottenere una partita in un sub-proprietà dell'oggetto (s) che si sta iterazione al di sopra di.

Dalla documentazione:

Si noti che una proprietà chiamata corrisponderà proprietà sullo stesso livello solo, mentre il $ proprietà speciale corrisponderà proprietà sullo stesso livello o più in profondità . Per esempio. un elemento dell'array come {name: {first: 'John', last: 'Doe'}} non verrà confrontato con {name: 'John'}, ma verrà confrontato con {$: 'John'}.

Si consiglia di creare il filtro personalizzato. Ho modificato il codice implementando un filtro personalizzato, una copia funzionante del requisito.

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

Mostra tutto lo plunker qui https://codepen.io/anon/pen/PPNJLB

Answer 2

Utilizzare questo eccellente filtro da questa risposta:

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

Solo per qualche suggerimento. Hope aiuta

Answer 4

Tha sopra l'esempio dato da Kashif Mustafa funziona perfettamente. L'unico cambiamento che abbiamo dovuto fare è analizzare gli ID in numeri interi da stringa.

cshtml:

<div ng-repeat="e in AllEntities | customArray:SelectedEntities:'id'">{{ e.label }}</div> 

regolatore:

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

filtro:

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