ng-repeat and filter not working AngularJS

Question

I have an array which I print out it's elements based on which category is selected

<li class="thumbnail" ng-repeat="temp in templates| filter:{temp.category_id :       selectedCategoryId }:true">

templates looks like this :

[{"id":"1","account_id":null,"category_id":"1","name":"Blue","thumbnail":"placehold.it/210x300","category_name":"test"},{"id":"2","account_id":null,"category_id":"1","name":"Red","thumbnail":"placehold.it/210x300","category_name":"test"},{"id":"3","account_id":null,"category_id":"2","name":"Green","thumbnail":"placehold.it/210x300","category_name":"test again"}]

Thanks for the help !

EDIT : I also wanted to add an extra condition , that is temp.category_id == null , show all.

KayakDave · Accepted Answer · 2013-11-08 22:38:01Z

2

You don't need to specify temp again in the filter.

Change

 filter:{temp.category_id : selectedCategoryId }:true

To

 filter:{category_id : selectedCategoryId }:true

Here's a fiddle of it working: http://jsfiddle.net/Sqq3s/

answered Nov 8, 2013 at 22:38

KayakDave

24.7k3 gold badges68 silver badges68 bronze badges

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

4 Comments

Nadi Hassan Hassan Over a year ago

If I wanted to also add an extra condition , for example that if selectedCategoryId == null then show all

KayakDave Over a year ago

You can stack filters. But they're additive (the results of one flow into the next). So that won't help you show all if no options are found. An approach to that is to have an additional display block controlled by an ng-show that is triggered if selectedCategoryID == null.

Nadi Hassan Hassan Over a year ago

<li class="thumbnail" ng-repeat="temp in templates | filter:{selectedCategoryId : null }:true"> Does not seem to be working

KayakDave Over a year ago

selectedCategoryID == null would be used within an ng-show (docs.angularjs.org/api/ng.directive:ngShow) that controls a separate dom element which displays everything. Think of this as entirely separate from your ng-repeat. If you really need ng-repeat to handle all of this you could write a custom filter. But that's a bit more complex than using ng-show on a new dom element.

musically_ut · Accepted Answer · 2013-11-08 22:35:50Z

0

Your filter should be:

<li ng-repeat="temp in templates | filter:{category_id : selectedCategoryId}:true"> ... </li>

Writing filter: {temp.category_id : selectedCategoryId} would look for property temp.category_id (which is an invalid name for a property, it should read 'temp.category_id') in the temp object. However, you want to look for the property category_id.

answered Nov 8, 2013 at 22:35

musically_ut

34.3k9 gold badges98 silver badges110 bronze badges

Collectives™ on Stack Overflow

ng-repeat and filter not working AngularJS

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related