您的位置：首页 > Web前端 > JavaScript

Angular.js之ng-options用法

2016-09-27 22:44 579 查看

官网介绍：

最简单的例子（基本下拉）：

html:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="myCtrl.js"></script>
</head>
<body>

<div ng-controller="courseCtrl">
<select ng-options="subject.name for subject in subjects" ng-model="currentSubject" ng-change="changeSubject(currentSubject)">
<option value=" ">---subject---</option>
</select>
<ul>
<li ng-repeat="course in courses">{{ course.name}}</li>
</ul>
</div>

</body>
</html>

js片段：数据为假数据

'use strict';
var app = angular.module('myApp',[]);
app.controller('courseCtrl',function($scope){

$scope.subjects=[{
name: 'science',
subjectCode:'lan'
},{
name:'social',
subjectCode:'cg'
}];

$scope.courses=[{
name:'scienceOne',
subjectCode:'lan'
},{
name:'socialTwo',
subjectCode:'cg'
}];

$scope.currentSubject = '';

if($scope.subjects) {
$scope.currentSubject = $scope.subjects[0];
};

$scope.changeSubject = function(subject){

};

});

在控制台审查元素,就会发现：

option会自动添加label。因为在程序中定义了ng-model,所以当存在subjects的时候，就会初始加载第一个作为option的第一项内容。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： angular

相关文章推荐

新的分享

章节导航