AngularJs How to filter ngRepeat with another array elements
Solution 1
Your problem is that you are trying to get a match on a sub-property of the object(s) you are iterating over.
From the docs:
Note that a named property will match properties on the same level only, while the special $ property will match properties on the same level or deeper. E.g. an array item like {name: {first: 'John', last: 'Doe'}} will not be matched by {name: 'John'}, but will be matched by {$: 'John'}.
I would recommend you will make your custom filter. I have changed your code by implementing custom filter, working copy of your requirement.
<li class="list-group-item" ng-repeat='item in items | customArray:myitems:"id"'>{{item.name}}</li>
See complete plunker here https://codepen.io/anon/pen/PPNJLB
Solution 2
Use this excellent filter from this answer :
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;
});
}
};
});
Mo.
Every nice creation start from imagination followed by dedication. Contacts 👇 Portfolio LinkedIn
Updated on October 27, 2020Comments
-
Mo. over 3 years
Is there any option to filter from
$scope.items
where the ID exist in the 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>