Question

有很多关于SO的问题和答案，用于预先选择angularjs中的第一个元素，但是当select上的ng-options是过滤选项时，我找不到任何帮助，即你不知道第一个选择是什么。请考虑以下情形：

<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是按名称按字母顺序排序选项，此外，它可能不会出现在列表 at all ，具体取决于“hide”标志的状态。

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

Answer 1

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

// 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];

像这样，模型将适用于第一个filtered选项。

如果在select中没有自动选择该选项，可以通过jQlite或纯javascript处理DOM来手动执行（至少，模型是正确的）。

Answer 2

控制器中的

执行此操作：

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>

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

2 个答案: