AngularJS中ng-options是用来实现下拉列表数据绑定的重要指令，通过它实现下拉列表的绑定非常方便简单。
基本语法格式
基本语法格式如下：
<select ng-model="selected" ng-options="value for value in values">
</select>
上述代码中，“selected”表示选中的项，”values“是下拉列表中的数据源，”value for value in values“则用于循环遍历数据，并将循环到的每个数据项绑定到下拉列表的每一项中去。
示例1
<!DOCTYPE html>
<html>
<head>
<title>AngularJS ng-options实现下拉列表数据绑定</title>
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<select ng-model="selected" ng-options="color.id as color.name for color in colors"></select>
<p>You have selected: {{selected}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.colors = [
{id: 1, name: '红色'},
{id: 2, name: '绿色'},
{id: 3, name: '蓝色'}
];
});
</script>
</body>
</html>
在上述示例中，我们通过ng-options实现了一个名为“colors”的下拉列表的数据绑定，将每个数据项的“id”字段作为每一项的值，而将“name”字段作为每一项的文字内容。同时，我们通过ng-model将选择的项绑定到$scope.selected变量中，最终展现在页面上。
示例2
<!DOCTYPE html>
<html>
<head>
<title>AngularJS ng-options实现下拉列表数据绑定</title>
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<select ng-model="selected" ng-options="value.name group by value.type for value in values | orderBy:'type'"></select>
<p>You have selected: {{selected.name}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.values = [
{name: '苹果', type:'水果'},
{name: '橙子', type:'水果'},
{name: '菠萝', type:'水果'},
{name: '猕猴桃', type:'水果'},
{name: '牛排', type:'肉类'},
{name: '猪排', type:'肉类'},
{name: '鸡肉', type:'肉类'},
{name: '水煮鱼', type:'鱼类'},
{name: '宫保鸡丁', type:'鸡肉'}
];
});
</script>
</body>
</html>
在上述示例中，我们通过ng-options实现了一个按类型分组的下拉列表，“values”是下拉列表数据源，我们通过“value.type”将数据项按类型分组，并通过“orderBy”指令对数据项按类型名称进行排序。而页面显示的内容则是被分组的每个数据项的名字。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：AngularJS中ng-options实现下拉列表的数据绑定方法 - Python技术站
微信扫一扫 
支付宝扫一扫 