angular filter ng-repeat object

Question

I understand to filter an object in ng-repeat you do:

 <div ng-repeat = "name in names | filter: {name: 'David'}"></div>

however, what if I want to show 'David' and 'Andrew'

I have tried

<div ng-repeat = "foo in fooObj | filter: {name: 'David' && 'Andrew'}"></div>

and

<div ng-repeat = "foo in fooObj | filter: {name: 'David'} | filter: {name: 'Andrew'}"></div>

Both don't work the way I want to. Is this a case where I need a custom filter or is there something in the API i'm not seeing?

you want an OR condition so if value matches either it will display — charlietfl
– charlietfl, Commented Sep 15, 2014 at 22:18
I tried both and they don't work. @RaeefRefai when I do that, it only displays Andrew but when I have 'Andrew' || 'David' it displays David. It's displaying the last of the condition if it's truthy — Garuuk
– Garuuk, Commented Sep 15, 2014 at 22:54

Mattias Farnemyhr · Accepted Answer · 2014-09-16 00:00:19Z

3

Try this:

html

<div ng-controller="NameController">
  <div ng-repeat="name in names | filter: 'David,Andrew': compare">
    {{name}}
  </div>
</div>

js

app.controller(NameController, function($scope) {
    $scope.names = [
        'David',
        'Andrew',
        'Charles',
        ...
    ];
    $scope.compare = function(name, expected) {
        var expectedNames = expected.split(',');
        return expectedNames.indexOf(name) > -1;
    });
});

answered Sep 16, 2014 at 0:00

Mattias Farnemyhr

4,2483 gold badges31 silver badges50 bronze badges

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

2 Comments

Garuuk Over a year ago

Thank you, this worked however I also solved mine with a simple check function I also added in my own controller.

Mattias Farnemyhr Over a year ago

Great, liked your solution as well.

Garuuk · Accepted Answer · 2014-09-16 22:07:39Z

1

html

<div ng-repeat = "name in names | filter: nameFilter "></div>

controller

$scope.nameFilter = function(name){
        if (object.name === 'David' || object.name === 'Andrew'){
            return object.name;
        } else {
            return;
        }
    };

Obviously @Materik's solution is re-usable and I would actually put that in my filter module for later use! Thanks again

edited Sep 16, 2014 at 22:07

answered Sep 16, 2014 at 17:55

Garuuk

2,2946 gold badges34 silver badges62 bronze badges

1 Comment

Ben Taliadoros Over a year ago

The variable passed into the function should be object, or better, 'obj' not name

Michael Leanos · Accepted Answer · 2015-05-02 08:44:49Z

In case anyone is still having trouble with these types of filters. I know the OP didn't need a complex solution as this one. However, anyone dealing with multi-dimensional arrays or objects won't be able to use the accepted answer.

This is my solution. It took me a while to combine a few different strategies to get my desired filter. This same strategy can be applied to many different scenarios, with various data models.

data model example

items: {
   item: {
     type: { 'foo' }
   },
   item: {
     type: { 'bar' }
   },
   item: {
     type: { 'foo' }
   },
   item: {
     type: { 'blah' }
   }
 }

My ng-repeat

data-ng-repeat="item in items | filter:searchText | filterByType:['foo', 'meh']"

And finally this is my filter function. I created a module level filter.

 angular.module('items')
 .filter('filterByType', function () {
  return function (items, types) {
    var filtered = [];

    filtered = items.filter(function (item) {
        return types.indexOf(item.type) !== -1;            
    });

    return filtered;        
  };
});

Collectives™ on Stack Overflow

angular filter ng-repeat object

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related