在 Angular 中，我们经常需要实现下拉框的动态绑定。ng-options 指令就是 Angular 提供的一种用于绑定下拉框的指令。本文将详细介绍如何使用 ng-options 指令实现下拉框的动态绑定。
ng-options 指令的基本用法
ng-options 指令可以绑定一个表达式，这个表达式必须返回一个数组。ng-options 指令会根据这个数组动态生成下拉框的选项。基本用法如下：
<select ng-model="selectedItem" ng-options="item.text for item in items"></select>
上面的代码中，ng-options 指令绑定了一个表达式 item.text for item in items。这个表达式表示对 items 数组中的每个元素，取出它的 text 属性作为选项的显示文本，然后生成一个 option 元素。selectedItem 是一个 ng-model 指令绑定的变量，用于保存用户选择的选项。
ng-options 指令的高级用法
除了基本用法之外，ng-options 指令还支持一些高级用法，可以更灵活的实现下拉框的动态绑定。
选择值绑定
我们可以通过指定 item.value for item in items 表达式，来将选项的值绑定到 items 数组中每个元素的 value 属性。示例代码如下：
<select ng-model="selectedItem" ng-options="item.text as item.value for item in items"></select>
分组显示
我们可以在 ng-options 指令中使用 group by 子句来对下拉框的选项进行分组显示。示例代码如下：
<select ng-model="selectedItem" ng-options="item.text group by item.group for item in items"></select>
上面的代码中，group by 子句指定了按照 item.group 分组，然后生成 optgroup 元素。
自定义模板
我们可以在 ng-options 指令中使用 ng-template 元素来自定义下拉框选项的显示模板。示例代码如下：
<select ng-model="selectedItem" ng-options="item as item.text for item in items"> <ng-template ng-option-tmpl let-item="item"> <span>{{ item.text }} ({{ item.value }})</span> </ng-template> </select>
上面的代码中，ng-option-tmpl 是自定义模板的名称。ng-template 元素中使用了 let-item="item" 来声明一个名为 item 的输入变量，表示当前的选项。然后在 ng-template 元素中定义了一个 span 元素，用于自定义选项的显示文本。
完整示例
下面是一个使用 ng-options 指令实现下拉框动态绑定的完整示例代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ----------------- ---------- ------- --------------------------------------------------------------------------------- ------- ------ - ------ ------ ------- ----- ---------- ----- -------- ---- - -------- ------- ------ ---- -------------- ----------------------- ------- ----------------------- --------------------- --- ---- -- ---------------- ------ -------- --- --- - ----------------------- ---- ------------------------ -------- -------- - ------------ - - ------ ------ ------ --- ------ ------ ------ --- ------ ------ ------ --- -- --- --------- ------- -------展开代码
运行效果如下：
结语
ng-options 指令是 Angular 提供的用于绑定下拉框的指令。本文介绍了 ng-options 指令的基本用法和高级用法，包括选择值绑定、分组显示和自定义模板。通过本文的学习，希望读者可以掌握如何使用 ng-options 指令实现下拉框动态绑定的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/679497ee504e4ea9bd92e0be
