AngularJs How to filter ngRepeat with another array elements

Question

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>

possible duplicate of Is it possible to filter angular.js by containment in another array? — Claies
– Claies, Commented Sep 17, 2015 at 19:03
It might be easier to create a custom filter in another file, and then call it. That way you can do as much complex logic as you want with one small filter declaration. — Vontei
– Vontei, Commented Sep 17, 2015 at 19:08

Kashif Mustafa · Accepted Answer · 2015-09-18 10:49:41Z

10

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

edited Sep 18, 2015 at 10:49

answered Sep 17, 2015 at 19:11

Kashif Mustafa

1,1826 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:32:05Z

7

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

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Sep 17, 2015 at 19:20

Moncef Hassein-bey

1,3619 silver badges14 bronze badges

Comments

Syed Ekram Uddin · Accepted Answer · 2015-09-17 19:41:11Z

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

Just for some hint. Hope helps

answered Sep 17, 2015 at 19:41

Syed Ekram Uddin

3,1412 gold badges31 silver badges33 bronze badges

Comments

Neelima Ediga · Accepted Answer · 2017-10-27 05:57:24Z

Tha above example given by Kashif Mustafa perfectly works. The only change we had to do is, parse the ids into integers from 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;
            });
        }
    };
});

Collectives™ on Stack Overflow

AngularJs How to filter ngRepeat with another array elements

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related