ng-options语法
时间: 2023-08-05 09:35:52 浏览: 89
`ng-options` 是 AngularJS 中用来生成下拉框选项的指令,其语法比较复杂,但是非常灵活,可以满足各种需求。
以下是 `ng-options` 的语法:
```
ng-options="expression for item in collection track by trackexpr"
```
其中,`expression` 是一个 AngularJS 表达式,用来定义下拉框选项的显示文本。`item` 是一个临时变量,用来循环遍历 `collection` 中的元素。`collection` 是一个数组或对象,用来定义下拉框的选项。
`trackexpr` 是一个可选的表达式,用来跟踪下拉框选项的值。如果没有指定 `trackexpr`,则默认使用 `item` 作为选项的值。
以下是一些常见的 `ng-options` 用法示例:
1. 从数组中生成选项:
```html
<select ng-model="selectedItem" ng-options="item for item in items"></select>
```
在上面的代码中,我们将 `items` 数组中的每个元素作为下拉框的选项,同时使用 `ng-model` 指令来绑定选中值。
2. 从对象中生成选项:
```html
<select ng-model="selectedItem" ng-options="key as value for (key, value) in items"></select>
```
在上面的代码中,我们将 `items` 对象中的每个键值对作为下拉框的选项,`key` 作为选项的值,`value` 作为选项的文本。
3. 从数组中生成选项,并指定选项的文本和值:
```html
<select ng-model="selectedItem" ng-options="item.id as item.name for item in items"></select>
```
在上面的代码中,我们将 `items` 数组中的每个元素作为下拉框的选项,但是指定了选项的显示文本为 `item.name`,选项的值为 `item.id`。
4. 使用 `track by` 来跟踪选项的值:
```html
<select ng-model="selectedItem" ng-options="item.id as item.name for item in items track by item.id"></select>
```
在上面的代码中,我们使用 `track by` 来跟踪选项的值,这样可以避免在选项发生变化时引起性能问题。
阅读全文