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