10

Czy istnieje opcja filtrowania z $scope.items, gdzie ID istnieje w tablicy $scope.myitems?AngularJs Jak filtrować ngRepeat z innymi elementami tablicy

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>

+0

możliwe duplikat [? Jest to możliwe przez filtr angularjs skażenia w innej tablicy] (http://stackoverflow.com/questions/15454900/is-it-possible-to-filter-angular-js-by-containment-in-another-array) – Claies

+0

Utworzenie niestandardowego filtru w innym pliku może być łatwiejsze, a następnie wywołanie go. W ten sposób możesz wykonać tyle złożonej logiki, ile chcesz, za pomocą małej deklaracji filtra. – Vontei

Odpowiedz

10

Twoim problemem jest to, że starają się spotkanie na sub-właściwości obiektu (ów) Jesteś iteracji koniec.

Od docs:

Zauważ, że nazwana nieruchomość będzie pasował do właściwości wyłącznie na tym samym poziomie , natomiast specjalny $ nieruchomość będzie pasował do właściwości na tym samym poziomie lub głębszego. Na przykład. element tablicy, taki jak {name: {first: 'John', last: 'Doe'}}, nie zostanie dopasowany przez {name: 'John'}, ale zostanie dopasowany przez {$: 'John'}.

Polecam zrobisz niestandardowy filtr. Zmieniłem twój kod, wprowadzając niestandardowy filtr, kopię roboczą twojego wymagania.

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

Zobacz całą plunker tutaj https://codepen.io/anon/pen/PPNJLB

+0

http://codepen.io/anon/pen/PPNJLB –

7

Użyj tego doskonały filtr z tej odpowiedzi:

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; 
      }); 
     } 
    }; 
}); 
0
angular.forEach($scope.items, function (v, k) { 
    console.log($scope.myitems[v.id - 1]); 
    $scope.myitems[v.id- 1].name = v.name; 
}, $scope.myitems); 

tylko dla niektórych podpowiedź. Nadzieja pomaga

0

Powyższy przykład podany przez Kashif Mustafa doskonale działa. Jedyną zmianą, którą musieliśmy zrobić, jest przeanalizowanie identyfikatorów w postaci liczb całkowitych z łańcucha znaków.

cshtml:

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

kontrolera:

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

filtra:

(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; 
      }); 
     } 
    }; 
}); 
Powiązane problemy