带有过滤器的angularjs选择使第一行为空，但在预先应用过滤器时不会

Question

我有点不明白为什么我的 ng-options 再次返回一个带有过滤器的空行。

请看看这个plunker

这个想法是在下拉列表中显示一个基于树状结构对象的组织结构图。

为此，我构建了一个将树扁平化为一维对象的服务。我在我的 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> 

这会显示一个空行，当我选择一个值时，它只是不选择它并返回到空行。这更令人困惑。

但是当我在控制器中预先使用 flatten 功能时，它工作得很好。

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

我不知道为什么第一个不起作用。

非常感谢您的帮助，如果您能对此行为提供解释，那就太好了。

谢谢！

Answer 1

过滤器会创建一个新数组，因此基本上您的模型和您的选项是 2 个不同的对象，因此选择不会将模型值识别为其选择的一部分，这就是为什么您在第一个中没有选择任何内容的原因。在第二个中，您从已过滤的数据集中选择模型，因此模型确实属于选项数组