ng-repeat filter and repeat by heading

Question

Trying to separate a group of filters that come back from a search that I am doing in my angular app. When I do the search i receive back the json and it is grouped by heading. Can I only repeat the items in that particular group and separate them that way? The reason is that each group will be in a unique UI module. So some of the list will be returned and displayed in a slider and some will be in radios.

Here is the:

<div heading="{{filter.name}}" 
     ng-repeat="filter in inventory.filters | filterOptions | orderBy:'name'" 
     is-open="true" show-attrs>
  <h3>{{filter.name | uppercase}}</h3>
    <div ng-repeat="option in filter.options">
      <span ng-click="selectedFilter(filter, option.option, option.id)">
      <a>{{option.option}}{{option.count>0 ? "("+option.count +")": ""}}</a>
      </span>
      <br/>
  </div>
</div>

So ultimately I would like to be able to target the filter.name.color and when it is this particular group have it display in this particular type of UI.

Any suggestions or links to readings is appreciated.

Answer 1

So based on your posted answer it looks like what you want to do is only show filters that have a particular name. If so, ngFilter should be able to take care of this like so:

| filter:{name: 'blah'}   

(or {name: something} if the value is in a variable called something)

Full HTML:

<div heading="{{filter.name}}" 
     ng-repeat="filter in inventory.filters | filterOptions | orderBy:'name' | filter:{name:'blah'}" 
     is-open="true" show-attrs>
  <h3>{{filter.name | uppercase}}</h3>
  <div ng-repeat="option in filter.options">
    <span ng-click="selectedFilter(filter, option.option, option.id)"><a>{{option.option}}{{option.count>0 ? "("+option.count +")": ""}}</a></span>
    <br/>
  </div>
  <!--Then I just repeat each ng-if that I want to be available -->
</div>

If you want to filter based on filter.name.color, you can use | filter:{name.color: 'blue'}, but if having that dot in the object notation doesn't sit quite right with you, an alternate option is to use a custom filter function:

| filter:hasColor.bind(null, 'blue')

Then in your controller:

$scope.hasColor = function (color, filter) {
    return filter.name && filter.name.color === color;
};