Angularjs uses ng-options with filter without removing filter options

advertisements

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?


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>