AngularJS：如何在过滤选择中预选第一个选项

在angularjs中预选select中的第一个元素有很多问题和答案，但是当select上的ng选项过滤选项时，即当您不知道第一个选项是什么时，我找不到任何帮助。考虑下面的场景：

<select id="color" ng-model="vm.color" ng-options="color.name for color in vm.colors | filter: {hide: false} | orderBy: 'name'"></select>

我读过的许多类似问题的大多数答案都建议只添加：ng init=vm.color=vm.colors[0]或在控制器中执行相同的操作。但是，在我的例子中，这是行不通的，因为vm.colors[0]可能不是select中的第一个元素，因为select按名称的字母顺序排列选项，而且，它可能根本不会出现在列表中，具体取决于hide标志的状态

---

我肯定可以在控制器中执行某种函数来获取FirstVisibleColor，或者返回按字母顺序排序的第一个未设置为隐藏的函数，但这将复制select中的逻辑。我觉得这里应该有一个选项，可以简单地选择第一个。我想我理解为什么angular默认创建一个空选项，也就是说，不让视图的渲染对控制器viewmodel进行意外更改，但在这种情况下，这正是我想要的

在控制器中执行以下操作：

this.myColor = this.colors[0];

在我看来

<select id="color" ng-model="vm.myColor" ng-options="color.name for color in vm.colors | filter: {hide: false} | orderBy: 'name'"></select>

---

我会将过滤后的选项包装到模型监视的对象中：

// HTML
<select 
    id="color" 
    ng-model="vm.color" 
    ng-options="opt.name for opt in vm.filteredColors = (
        vm.colors | filter: {hide: false} | orderBy: 'name'
    )">
</select>

// JS
vm.color = vm.filteredColors[0];

这样，模型将等同于第一个过滤选项

---

如果在select中未自动选择该选项，请至少通过jQlite或纯javascript手动处理DOM，该模型将是正确的。

只有在视图中保留该逻辑时，它才会复制该逻辑。如果将其移动到控制器，从而在控制器中显示一个不需要再过滤视图的notHiddenSortedColors，则不会有重复。你的观点也会更有效率。