ng-options 是 AngularJS 提供的一个指令，用于在 <select> 元素中显示选项。它可以让开发者方便地通过一些简单的配置来将一个数组绑定到 <select> 元素上，并且还可以支持对选项的排序、过滤和分组等操作。
通常情况下，我们使用 ng-options 指令只需要设置一个字符串值即可，例如：ng-options="item.id as item.name for item in items"，其中 item.id 和 item.name 分别表示 <option> 元素的 value 值和显示的文本内容，items 表示要显示的选项数组。
但是，在实际开发中，我们可能会遇到这样的需求：需要在 <option> 元素中显示多个属性值，例如，既需要显示id，又需要显示name。那么该如何使用 ng-options 实现呢？
答案是使用一个对象类型的表达式作为 ng-options 的参数，并在其中指定每个属性应该绑定到哪儿。例如，我们有一个包含 name 和 age 属性的对象数组，我们可以这样来设置 ng-options：
------- -----------------------
------------------ ---------- ---- --------- -- --------- --- ---- -- -------
---------上述代码中 selectedItem 表示当前选中的项， items 表示要显示的选项数组，{name: item.name, age: item.age} 表示要在 <option> 中显示的属性和对应的值。这里我们使用了 as 关键字将字符串作为显示文本，而将对象作为实际绑定的值。
另外，我们还可以通过指定 track by 子句来提高渲染性能。例如，我们有一个包含 name 和 age 属性的对象数组，且每个对象都有一个独一无二的 id 属性，我们可以这样来设置 ng-options：
------- -----------------------
------------------ ---------- ---- --------- -- ---------
--- ---- -- ----- ----- -- ---------
---------上述代码中，track by 子句指定了一个用于标识每个选项的表达式，从而让 AngularJS 在更新选项时能够更快地检测到变化。这对于大型数据集合尤其重要。
最后，我们来看一个完整的示例代码：
--------- -----
------
------
---------------- ---------- ---- ------- --------------
------- ------------------------------------------------------------------------------------
-------
----- -------------- -----------------------
------- -----------------------
------------------ ---------- ---- --------- -- ---------
--- ---- -- ----- ----- -- ---------
---------
----------- ----- -- ------------ ------
--------
--- --- - ----------------------- ----
------------------------ ---------------- -
------------ - -
- --- -- ----- -------- ---- -- --
- --- -- ----- ------ ---- -- --
- --- -- ----- ---------- ---- -- -
--
------------------- - -----
---
---------
-------
-------上述代码中，我们创建了一个基本的 AngularJS 应用，并在其中使用 ng-options 指令来显示一个包含 name 和 age 属性的对象数组。每个 <option> 元素都显示了对应对象的 name 和 age 属性。
希望这篇文章能够帮助读者理解如何在 AngularJS 中使用 ng-options 显示多个属性值，并且
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/27930