angularjs select with filter leaves first line empty but not when filter is applied upfront

问题

I am a bit lost as to why my ng-options is once again returning an empty line with a filter.

Please have a look at this plunker

The idea is to display in a dropdown list an org chart which is based on a tree-structured object.

To do this I have built a service that flattens the tree into a 1 dimensional object. I use this service inside a filter that is called in my ng-option.

<select ng-model="treeValue1" ng-init="treeValue1 = fields[0]" class='form-control' 
   ng-options="element as element.display for element in fields | flattenTree">
  </select> 

this displays an empty line and when I select a value, it just doesn't select it and goes back to the empty line. That's even more confusing.

But when I use the flatten function upfront in the controller, it works nicely.

<select ng-model="treeValue2" ng-init="treeValue2 = flatFields[0]" class='form-control' 
   ng-options="element as element.display for element in flatFields">
  </select> 

I have no idea why the first one isn't working.

Your help would be greatly appreciated and if you can provide an explanation for this behavior it would be awesome.

Thanks!

回答1:

a filter creates a new array so basically your model and your options are 2 different objects hence the select doesn't recognizes the models value as part of its selection thats why you have nothing selected in the first one. on the second one you are selection the model from the already filtered data set so the model does belong to the options array

来源：https://stackoverflow.com/questions/24414417/angularjs-select-with-filter-leaves-first-line-empty-but-not-when-filter-is-appl