从角度过滤器设置默认选项 | 从角度过滤器设置默认选项

本文介绍了从角度过滤器设置默认选项的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个使用过滤器生成的选择列表:

I have a select list which is being generated with a filter:

<select ng-model="item.SAC">
    <option ng-repeat="code in SACCodes | filter:{group: item.SACGroup}" value="{{code.code}}">{{code.code}} - {{code.description}} - {{code.group}}</option>
</select>

当 item.SACGroup 更改时，我想自动选择第一个有效选项(以使选择框永远不会为空).

When item.SACGroup changes I want to automatically select the first valid option (so that the select box never turns blank).

$scope.SACCodes = [
{'code':'034', 'description':'FTG Support Steel', 'group':'footings'},
{'code':'037', 'description':'Masonry Wall FTGs', 'group':'footings'},
{'code':'032', 'description':'S.O.G. Rebar', 'group':'slabs'},
{'code':'033', 'description':'S.O.G. (DBL.Mat)', 'group':'slabs'}
];

推荐答案

这是工作相同的JSBIN 示例:

说明:

正如@AnikIslamAbhi的评论中指出的那样，您应该在此处使用 ng-options :

As pointed out in the comments by @AnikIslamAb you should use ng-options here:

<select ng-model="item.SAC" ng-options="code.code as codeLabel(code.code, code.description, code.group) for code in SACCodes | filter:{group: item.SACGroup}">
</select>

在您的范围内定义 codeLabel 方法:

Define the codeLabel method on your scope:

$scope.codeLabel = function(code, description, group) {
  return code + " - " + description + " - " + group;
};

对于设置默认选项值的最初问题，请将 ng-init 添加到< select> 元素:

For your original problem of setting a default option value, add ng-init to your <select> element:

<select ng-model="item.SAC" ng-options="code.code as codeLabel(code.code, code.description, code.group) for code in SACCodes | filter:{group: item.SACGroup}" ng-init="item.SAC = SACCodes[0].code">
</select>

希望它对您有帮助.

这篇关于从角度过滤器设置默认选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！