當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

AngularJS学习篇（十）

發(fā)布時(shí)間：2025/7/14 javascript 16 豆豆

生活随笔收集整理的這篇文章主要介紹了 AngularJS学习篇（十）小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

AngularJS Select(選擇框)

使用 ng-options 創(chuàng)建選擇框

在 AngularJS 中我們可以使用?ng-option?指令來創(chuàng)建一個(gè)下拉列表，列表項(xiàng)通過對(duì)象和數(shù)組循環(huán)輸出，如下實(shí)例:

<!DOCTYPE html> <html> <head><meta charset="utf-8"><script src="angular-1.6.3/angular.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"><select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names"></select> </div> <script>var app = angular.module('myApp', []);app.controller('myCtrl',function ($scope) {$scope.names=['google','baidu','tengxun'];}) </script> </body> </html>

ng-init 初始值，ng-options="x for x in names"讀取數(shù)組

使用 ng-repeat 創(chuàng)建選擇框

<!DOCTYPE html> <html> <head><meta charset="utf-8"><script src="angular-1.6.3/angular.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"><select><option ng-repeat="x in names">{{x}}</option></select> </div> <script>var app = angular.module('myApp', []);app.controller('myCtrl',function ($scope) {$scope.names=['google','baidu','tengxun'];}) </script> </body> </html>

ng-repeat?指令是通過數(shù)組來循環(huán) HTML 代碼來創(chuàng)建下拉列表，但?ng-options?指令更適合創(chuàng)建下拉列表，它有以下優(yōu)勢(shì)：

使用?ng-options?的選項(xiàng)是一個(gè)對(duì)象，?ng-repeat?是一個(gè)字符串。當(dāng)選擇值是一個(gè)對(duì)象時(shí)，我們就可以獲取更多信息，應(yīng)用也更靈活。

<!DOCTYPE html> <html> <head><meta charset="utf-8"><script src="angular-1.6.3/angular.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"><select ng-model="selectedSite"><option ng-repeat="x in names" value="{{x.url}}">{{x.site}}</option></select><h1>你選擇的是: {{selectedSite}}</h1>　　　 </div> <script>var app = angular.module('myApp', []);app.controller('myCtrl',function ($scope) {$scope.names=[ {site : "Google", url : "http://www.google.com"},{site : "Runoob", url : "http://www.runoob.com"},{site : "Taobao", url : "http://www.taobao.com"}];}) </script> </body> </html>

你選擇的是: http://www.runoob.com---->字符串

<!DOCTYPE html> <html> <head><meta charset="utf-8"><script src="angular-1.6.3/angular.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"><select ng-model="selectedSite" ng-options="x.site for x in names"></select><h1>你選擇的是: {{selectedSite}}</h1> </div> <script>var app = angular.module('myApp', []);app.controller('myCtrl',function ($scope) {$scope.names=[ {site : "Google", url : "http://www.google.com"},{site : "Runoob", url : "http://www.runoob.com"},{site : "Taobao", url : "http://www.taobao.com"}];}) </script> </body> </html>

你選擇的是: {"site":"Google","url":"http://www.google.com"}---->對(duì)象

?

數(shù)據(jù)源為對(duì)象

使用對(duì)象作為數(shù)據(jù)源,?x?為鍵(key),?y?為值(value):

<!DOCTYPE html> <html> <head><meta charset="utf-8"><script src="angular-1.6.3/angular.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"><select ng-model="selectedSite" ng-options="x for (x,y) in names"></select><h1>你選擇的是: {{selectedSite}}</h1> </div> <script>var app = angular.module('myApp', []);app.controller('myCtrl',function ($scope) {$scope.names= {site1 : "Google", site2 : "http://www.google.com"};}) </script> </body> </html>

你選擇的是: Google

你選擇的值為在 key-value?對(duì)中的?value。

value?在 key-value?對(duì)中也可以是個(gè)對(duì)象：

<!DOCTYPE html> <html> <head><meta charset="utf-8"><script src="angular-1.6.3/angular.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"><select ng-model="selectedSite" ng-options="x for (x,y) in names"></select><h1>你選擇的是: {{selectedSite}}</h1> </div> <script>var app = angular.module('myApp', []);app.controller('myCtrl',function ($scope) {$scope.names= {car01 : {brand : "Ford", model : "Mustang", color : "red"},car02 : {brand : "Fiat", model : "500", color : "white"},car03 : {brand : "Volvo", model : "XC90", color : "black"}};}) </script> </body> </html>

你選擇的是: {"brand":"Ford","model":"Mustang","color":"red"}

在下拉菜單也可以不使用?key-value 對(duì)中的?key?, 直接使用對(duì)象的屬性，但是選項(xiàng)還是value：

<!DOCTYPE html> <html> <head><meta charset="utf-8"><script src="angular-1.6.3/angular.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"><select ng-model="selectedSite" ng-options="y.brand for (x,y) in names"></select><h1>你選擇的是: {{selectedSite}}</h1> </div> <script>var app = angular.module('myApp', []);app.controller('myCtrl',function ($scope) {$scope.names= {car01 : {brand : "Ford", model : "Mustang", color : "red"},car02 : {brand : "Fiat", model : "500", color : "white"},car03 : {brand : "Volvo", model : "XC90", color : "black"}};}) </script> </body> </html>

你選擇的是: {"brand":"Ford","model":"Mustang","color":"red"}

轉(zhuǎn)載于:https://www.cnblogs.com/dehuachenyunfei/p/6648459.html

總結(jié)

以上是生活随笔為你收集整理的AngularJS学习篇（十）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

AngularJS