CODEWITHSUNDEEP
angularjs
DeclanMcD
DeclanMcD

Reputation: 1586

Filtering by array within ng-options

I would like to filter my list of objects in the ng-options by those that match a certain condition within the object.

For example I have data like this:

{
        id:1,
        type:"Type A",
        name:"loc 1",
        items:[
            {id:1, name:"item 1"},
            {id:2, name:"item 2"},
            {id:3, name:"item 3"},
        ]
    },

My select looks like this 

<select ng-model="test" ng-options="location as (location.name + ' ' + location.items.length + ' items') group by location.type for location in locations | filter:{items.length:filterBy.itemId}">
</select>

The example below works by filtering the list by the number of items in the array, but what I want to do is to filter the list by those that have a criteria such as all objects that have an item with id=1.

Here is a working fiddle with the above.

fiddle example

What I would like/expect (in pseudo) something like:

ng-options="location as (location.name + ' ' + location.items.length + ' items') group by location.type for location in locations | filter:{items{id:filterBy.itemId}}"

Is it even possible?

Update: The fiddle above has been updated with the code in the answer from @Marcos Sandrini below in case anyone needs it.

Upvotes: 0

Views: 4658

Answers (2)

Marcos Sandrini
Marcos Sandrini

Reputation: 450

If you're stuck with ng-options, you always have the choice to do whatever you want with options tag in a ng-repeat, not the ideal case for everything, but it works just as well most of the time and it is much more readable and understandable, especially for more complex cases.

<option value="{{location.id}}">
   {{location.name + ' ' + location.items.length + ' items' | orderBy: 'location.type' | filter:IdFilter(location,idToFilter)}}
</option>

Just be sure you don't use ng-show and ng-hide with option tags, it won't work (use ng-if instead). The filter function goes below:

function IdFilter(location,idToFilter){
  var hasId = false;
  angular.foreach(location.items, function(l){
    if (l.id===idToFilter) hasId = true; 
  }
  return hasId;
}

Upvotes: 1

mindparse
mindparse

Reputation: 7225

You can filter by a function

this.filterFunction = function(item) {
      return item.itemId===1;
}

and so you would then just use 

filter:filterFunction

Upvotes: 0

Related Questions