快捷導(dǎo)航

AngularJS基礎(chǔ) ng-options 指令詳解

更新時(shí)間：2016年08月02日 15:43:24 投稿：lqh

本文主要介紹AngularJS ng-options 指令,這里對(duì)ng-options指令的知識(shí)做了詳細(xì)整理,并附有詳細(xì)的代碼示例,有需要的小伙伴可以參考下

AngularJS ng-options 指令

AngularJS 實(shí)例

使用數(shù)組元素填充下拉列表:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selectedName" ng-options="item for item in names">
</select>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.names = ["Emil", "Tobias", "Linus"];
});
</script>

<p>該實(shí)例演示了如何使用 ng-options 指令填充下拉列表。</p>

</body>
</html>

定義和用法

ng-options 指令用于使用 <options> 填充 <select> 元素的選項(xiàng)。

ng-options 指令使用數(shù)組來(lái)填充下拉列表，多數(shù)情況下與 ng-repeat 指令一起使用。

語(yǔ)法

<details> 元素支持該指令。

參數(shù)值

值	描述
array expression	數(shù)組中為 select 元素填充選項(xiàng)的表達(dá)式。

以上就是對(duì)AngularJS ng-options資料的整理，后續(xù)繼續(xù)補(bǔ)充。

您可能感興趣的文章:

相關(guān)文章

基于Angularjs實(shí)現(xiàn)分頁(yè)功能
這篇文章主要介紹了基于Angularjs實(shí)現(xiàn)分頁(yè)功能的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-05-05
BootStrap+Angularjs+NgDialog實(shí)現(xiàn)模式對(duì)話(huà)框
在完成一個(gè)后臺(tái)管理系統(tǒng)時(shí)，需要用表格顯示注冊(cè)用戶(hù)的信息。但是用戶(hù)地址太長(zhǎng)了，不好顯示。所以想做一個(gè)模式對(duì)話(huà)框，點(diǎn)擊詳細(xì)地址按鈕時(shí)，彈出對(duì)話(huà)框，顯示地址。下面小編給大家分享下實(shí)現(xiàn)方法，一起看下吧
2016-08-08
淺談angularJS中的事件
下面小編就為大家?guī)?lái)一篇淺談angularJS中的事件。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-07-07
AngularJS實(shí)現(xiàn)動(dòng)態(tài)編譯添加到dom中的方法
這篇文章主要介紹了AngularJS實(shí)現(xiàn)動(dòng)態(tài)編譯添加到dom中的方法,結(jié)合實(shí)例形式分析了AngularJS動(dòng)態(tài)編輯構(gòu)建模板的相關(guān)操作技巧,需要的朋友可以參考下
2016-11-11
詳解Angular2表單-模板驅(qū)動(dòng)的表單(Template-Driven Forms)
本篇文章主要介紹了詳解Angular2表單-模板驅(qū)動(dòng)的表單(Template-Driven Forms)，具有一定的參考價(jià)值，有興趣的可以了解一下
2017-08-08
angular4中關(guān)于表單的校驗(yàn)示例
本篇文章主要介紹了angular4中關(guān)于表單的校驗(yàn)示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-10-10
AngularJS表格添加序號(hào)的方法
這篇文章主要介紹了AngularJS表格添加序號(hào)的方法,涉及AngularJS表格的遍歷及序號(hào)添加實(shí)現(xiàn)技巧,需要的朋友可以參考下
2017-03-03
高效利用Angular中內(nèi)置服務(wù)$http、$location等
這篇文章主要介紹了如何高效利用Angular中內(nèi)置服務(wù)，大家知道的Angular內(nèi)置服務(wù)有哪些，感興趣的小伙伴們可以參考一下
2016-03-03
AngularJS Phonecat實(shí)例講解
這篇文章主要為大家詳細(xì)介紹了AngularJS Phonecat實(shí)例,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-11-11
詳解在AngularJS的controller外部直接獲取$scope
本篇文章主要介紹了詳解在AngularJS的controller外部直接獲取$scope ，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06