Angularjs use ng-options with filter without removing options from filter

Question

I'm trying to use a ng-options with a filter and the behavior seen is expected. However, the expected behavior is not what is needed.

What would be the best practice when doing something like:

<div ng-init="blades = [{item:'1', spec:'2'}]"></div>
<select 
    ng-model="blades"
    ng-options="blade.spec as blade.spec for blade in blades">
    <option>--</option>
</select>
<ul>
    <li ng-repeat="blade in blades">{{blades.item}}</li>
</ul>

Here, when you filter, you filter the values out of the select list rendering it useless. What's the best practice?

drew schmaltz · Accepted Answer · 2013-01-24 18:22:45Z

5

I answered my own question and a bunch of others in the process. This is how :

<div ng-init="items = [{id:'1', spec:'A'}, {id:'2', spec:'B']"></div>
<select 
  ng-model="searchSpec"
  ng-options="item.spec as item.spec for item in items">
  <option>--</option>
</select>
<ul>
  <li ng-repeat="item in items | filter:{spec:searchSpec}">{{item.spec}}</li>
</ul>

answered Jan 24, 2013 at 18:22

drew schmaltz

1,5844 gold badges19 silver badges29 bronze badges

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

Comments

Will Stern · Accepted Answer · 2013-12-03 18:41:37Z

0

Angular has a built-in way for doing this. Make ng-model="search.spec" and search will always be {spec:(selectedValue)}. It's nice, because you can tie multiple select dropdowns to different keys of the search object.

<div ng-init="items = [{id:'1', spec:'A'}, {id:'2', spec:'B']"></div>
<select 
  ng-model="search.spec"
  ng-options="item.spec as item.spec for item in items">
    <option>--</option>
</select>
<ul>
    <li ng-repeat="item in items | filter:search">{{item.spec}}</li>
</ul>

answered Dec 3, 2013 at 18:41

Will Stern

17.7k5 gold badges38 silver badges22 bronze badges

Collectives™ on Stack Overflow

Angularjs use ng-options with filter without removing options from filter

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related