ngRepeat filter by array-property

Question

If I have an object with a property that is an array, how can I filter by the first element of this property?

Data

{
    Id: "0",
    Name: ["John", "Doe"]
}

ngRepeat

<li ng-repeat="u in users | filter:{Name[0]: 'John'}">{{ u.Name[0] + ' ' + u.Name[1] }}</li>

You probably need a custom filter to achieve this. custom filter — nubinub
– nubinub, Commented Apr 18, 2016 at 11:34
thank you nubinub :D i think i've found the solution, but i will wait to see if there are any hacks that doesn't require custom filter — tu4n
– tu4n, Commented Apr 18, 2016 at 12:50

Community · Accepted Answer · 2017-05-23 10:30:28Z

1

Slightly modified from this SO answer to work with arrays:

<li ng-repeat="u in users | filter: {Name: ['John']}">{{ u.Name[0] + ' ' + u.Name[1] }}</li>

Update: This doesn't seem to work after version 1.2.1 or so. You can see the difference in this fiddle using v1.2.1 and this one using v1.4.8. Not sure what's changed between these two or if the feature was ever even officially supported. As an alternative, you could use a function predicate, like so:

<li ng-repeat="u in users | filter: isJohn">{{ u.Name[0] + ' ' + u.Name[1] }}</li>

controller:

$scope.isJohn = function(value){
    return value.Name[0] === 'John';
};

But then again, that's not much simpler than creating a custom filter like nubinub suggested in the comments, and definitely less reusable.

edited May 23, 2017 at 10:30

CommunityBot

11 silver badge

answered Apr 18, 2016 at 12:07

noppa

4,08623 silver badges23 bronze badges

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

5 Comments

tu4n Over a year ago

this doesnt work, it will works if i have 2 property FirstName and LastName, then i can filter like that SO answer, but i have an array-property

noppa Over a year ago

Did you try the modified version I wrote?

noppa Over a year ago

@nmtuan The code snippet in this answer should work on your array just fine

tu4n Over a year ago

I tried your code on jsfiddle but it doesnt work, also tested on my own project jsfiddle.net/tzbgvzm2/1

noppa Over a year ago

@nmtuan Ah, you're right. I seem to have used an old version of angular when testing the original answer. My bad. I've updated the answer.

Wasiq Muhammad · Accepted Answer · 2016-04-18 13:24:15Z

0

Try this

<li ng-repeat="u in users | filter:u.Name[0] == 'John'">{{ u.Name[0] + ' ' + u.Name[1] }}</li>

edited Apr 18, 2016 at 13:24

answered Apr 18, 2016 at 11:45

Wasiq Muhammad

3,1483 gold badges19 silver badges30 bronze badges

2 Comments

tu4n Over a year ago

hmm how do i expect that u.Name[0] equals something ?

tu4n Over a year ago

i want to filter out all the users that have his/her first-name (e.g Name[0]) equals 'John', with your expression i dont know where to put the filter-key 'John'

Collectives™ on Stack Overflow

ngRepeat filter by array-property

2 Answers 2

5 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related