Angular.js之ng-options用法

官网介绍：

最简单的例子（基本下拉）：
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.js之ng-options用法相关推荐

angular8 rest_带有Angular JS的Java EE 7 – CRUD，REST，验证–第2部分
angular8 rest 这是Angular JS承诺的Java EE 7的后续版本–第1部分 . 花了比我预期更长的时间(找到时间来准备代码和博客文章),但是终于到了! 应用程序第1部分中的原始 ...
带有Angular JS的Java EE 7 – CRUD，REST，验证–第2部分
这是Angular JS承诺的Java EE 7的后续版本–第1部分 . 花了比我预期更长的时间(找到时间来准备代码和博客文章),但是终于到了! 应用程序第1部分中的原始应用程序只是带有分页的简单列 ...
angular js 常用指令ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的？
大家好,我是IT修真院郑州分院第七期的学员冯亚超,一枚正直纯洁善良的WEB程序员今天给大家分享一下,题目angular js 常用指令ng-if.ng-class.ng-option.ng-valu ...
Angular.js为什么如此火呢？
AngularJS学习列表:七步走 Angular.js 从菜鸟到专家 (系列列表) 上一篇之后,Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM ...
如何在Angular.js选择框中使用默认选项
本文翻译自:How to have a default option in Angular.js select box I have searched Google and can't find an ...
3、Angular JS 学习笔记 – Controllers [翻译中]
2019独角兽企业重金招聘Python工程师标准>>> 理解控制器在Angular中,一个控制器是一个javascript构造函数用于填充Angular作用域. 当一个控制器通过使 ...
Angular CLI 全局 ng.cmd 文件内容分析
文件内容如下: REM Jerry ::这是注释 @ECHO off SETLOCAL CALL :find_dp0IF EXIST "%dp0%\node.exe" (SET & ...
史上最全的Angular.js 的学习资源
Angular.js 的一些学习资源基础官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/: 官方zi ...
angular java_带有Angular JS的Java EE 7 –第1部分
angular java 今天的帖子将向您展示如何使用Java EE 7和Angular JS构建一个非常简单的应用程序. 在去那里之前,让我告诉您一个简短的故事: 我必须承认,我从来都不是Java语 ...

Angular.js之ng-options用法

Angular.js之ng-options用法相关推荐

最新文章

热门文章