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

时间:2016-03-23 22:48:20

标签: angularjs drop-down-menu

有很多关于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)进行意外更改,但在这种情况下,这正是我想要的!

2 个答案:

答案 0 :(得分:0)

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

// 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来手动执行(至少,模型是正确的)。

答案 1 :(得分:-1)

控制器中的

执行此操作:

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>