當前位置：
首頁 >
AngularJS学习篇（十）
發布時間：2025/7/14
39
豆豆
生活随笔
收集整理的這篇文章主要介紹了
AngularJS学习篇（十）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
AngularJS Select(選擇框)
使用 ng-options 創建選擇框
在 AngularJS 中我們可以使用?ng-option?指令來創建一個下拉列表，列表項通過對象和數組循環輸出，如下實例:
<!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"讀取數組
使用 ng-repeat 創建選擇框
<!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?指令是通過數組來循環 HTML 代碼來創建下拉列表，但?ng-options?指令更適合創建下拉列表，它有以下優勢：
使用?ng-options?的選項是一個對象，?ng-repeat?是一個字符串。當選擇值是一個對象時，我們就可以獲取更多信息，應用也更靈活。
<!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"}---->對象
?
數據源為對象
使用對象作為數據源,?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?對中的?value。
?
value?在 key-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= {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 對中的?key?, 直接使用對象的屬性，但是選項還是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"}
?
轉載于:https://www.cnblogs.com/dehuachenyunfei/p/6648459.html
總結
以上是生活随笔為你收集整理的AngularJS学习篇（十）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MFC接收命令行参数的三种方法
- 下一篇： Spring Boot由jar包转成wa