什么是 ng-options 指令
ng-options 指令是 AngularJS 中用于创建下拉选择框的指令，它可以绑定一个数组，并将该数组的每个元素转换成选项。ng-options 指令能够为开发者提供更加强大，更加灵活的创建下拉选择框的方式。
ng-options 的基本用法
在 AngularJS 中，我们可以通过 ng-options 指令来创建一个下拉选择框，其基本用法如下：
<select ng-model="selectedOption" ng-options="option for option in options"></select>
在上述代码中，我们通过 ng-options 指令定义了下拉选择框的选项。该指令的基本格式为：ng-options="value as label for item in array"，其中：
value as label：选项的值和显示文本，可以是一个表达式；item in array：用于循环的数组和对象；- value：选项的值；
- label：选项的显示文本；
- item：循环的数组或对象中的元素。
例如，我们可以定义如下的选项：
$scope.options = ['Apple', 'Banana', 'Orange'];
上述代码表示下拉选择框中的选项为 Apple，Banana 和 Orange。
ng-options 的自定义用法
除了基本用法外，我们还可以通过函数的方式来对选项进行自定义。下面是一个例子：
<select ng-model="selectedOption" ng-options="option.name for option in options"></select>
$scope.options = [
{id: 1, name: 'Apple'},
{id: 2, name: 'Banana'},
{id: 3, name: 'Orange'}
];在上述代码中，我们定义了一个数组 options，并通过 ng-options 指令指定了选项的名称为 option.name。
ng-options 的实际应用场景
ng-options 指令可以应用于各种开发场景，比如：
动态生成选项
在一些需要动态生成选项的场景，ng-options 可以非常方便地处理数据，并进行渲染。例如，我们可以通过 ng-options 指令动态获取数据，并将数据渲染到下拉选择框中，代码如下：
<select ng-model="selectedOption" ng-options="option.label for option in getOptions()"></select>
$scope.getOptions = function() {
return [
{id: 1, label: 'Apple'},
{id: 2, label: 'Banana'},
{id: 3, label: 'Orange'}
];
};在上述代码中，我们定义了一个函数 getOptions()，该函数返回一个数组，其元素为 id 和 label。在 HTML 中使用 ng-options 指令时，我们将 label 作为选项的文本，将 getOptions() 函数作为选项的数据来源。
多级选项联动
在某些需要多级选项联动的场景中，ng-options 可以方便地解决问题。在多级选项联动中，每个下拉选择框的选项列表都会受到上级下拉选择框的选项列表的影响。例如：
<select ng-model="country" ng-options="c.name for c in countries"></select> <select ng-model="city" ng-options="ct.name for ct in getCity()"></select>
// javascriptcn.com 代码示例
$scope.countries = [
{id: 1, name: 'China'},
{id: 2, name: 'Japan'},
{id: 3, name: 'Korea'}
];
$scope.getCity = function() {
var cities = [];
if ($scope.country.id === 1) {
cities = [
{id: 1, name: 'Beijing'},
{id: 2, name: 'Shanghai'},
{id: 3, name: 'Guangzhou'}
];
} else if ($scope.country.id === 2) {
cities = [
{id: 4, name: 'Tokyo'},
{id: 5, name: 'Osaka'},
{id: 6, name: 'Nagoya'}
];
} else if ($scope.country.id === 3) {
cities = [
{id: 7, name: 'Seoul'},
{id: 8, name: 'Busan'},
{id: 9, name: 'Incheon'}
];
}
return cities;
};在上述代码中，我们定义了两个下拉选择框：第一个下拉选择框中的选项为国家，第二个下拉选择框中的选项为城市。在 HTML 中使用 ng-options 指令时，第一个下拉选择框的选项会影响第二个下拉选择框的选项。
总结
ng-options 指令是 AngularJS 中用于创建下拉选择框的指令。使用 ng-options 指令，我们可以非常方便地处理数据，并进行下拉选择框的渲染。ng-options 指令可以应用于各种开发场景，如动态生成选项和多级选项联动。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6538e60a7d4982a6eb20eb1b