當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
AngularJS(6)-选择框Select
生活随笔
收集整理的這篇文章主要介紹了
AngularJS(6)-选择框Select
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.在 AngularJS 中我們可以使用?ng-option?指令來創(chuàng)建一個下拉列表，列表項通過對象和數組循環(huán)輸出
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>選擇框Select</title><script src="angular-1.4.1/angular.min.js"></script> </head> <body><div ng-app="myApp" ng-controller="myCtrl"><select 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 = ["谷歌","百度","搜狗"];});</script> </body> </html>運行結果:
用ng-option加載列表：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>選擇框Select</title><script src="angular-1.4.1/angular.min.js"></script><script>var app = angular.module('myApp', []);app.controller('customersCtrl', function($scope) {$scope.sites = [{site:"谷歌",url:"http:www.google.com"},{site:"百度",url:"http:www.baidu.com"},{site:"搜狗",url:"http:www.sogou.com"}];});</script> </head> <body><div ng-app="myApp" ng-controller="customersCtrl"><select ng-model="selectedSite" ng-options="x.site for x in sites"></select><h1>你選擇的內容如下:</h1><p>名字:{{selectedSite.site}}</p><p>網址為:{{selectedSite.url}}</p></div> </body> </html>運行結果：
用ng-repeat加載列表數據也可以但是有局限性，選擇的是一個字符串：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>選擇框Select</title><script src="angular-1.4.1/angular.min.js"></script><script>var app = angular.module('myApp', []);app.controller('customersCtrl', function($scope) {$scope.sites = [{site:"谷歌",url:"http:www.google.com"},{site:"百度",url:"http:www.baidu.com"},{site:"搜狗",url:"http:www.sogou.com"}];});</script> </head> <body><div ng-app="myApp" ng-controller="customersCtrl"><select ng-model="selectedSite"><option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option></select><h1>你選擇的內容是:{{selectedSite}}</h1></div> </body> </html>運行結果：
ng-options使用對象有很大的不同，使用對象作為數據源,?x?為鍵(key),?y?為值(value),select控件ng-options表示控件的值是什么，然后ng-model綁定了數據對應的數據源：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>選擇框Select</title><script src="angular-1.4.1/angular.min.js"></script><script>var app = angular.module('myApp', []);app.controller('customersCtrl', function($scope) {$scope.sites = {site01 : "Google",site02 : "Runoob",site03 : "Taobao"};});</script> </head> <body><div ng-app="myApp" ng-controller="customersCtrl"><select ng-model="selectedSite" ng-options="x for (x, y) in sites"></select>你選擇的是:{{selectedSite}}</div> </body> </html> 運行結果?你選擇的值為在 key-value?對中的?value。
?
此外value?在 key-value?對中也可以是個對象：選擇的值在 key-value?對的?value?中, 這是它是一個對象:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>選擇框Select</title><script src="angular-1.4.1/angular.min.js"></script><script>var app = angular.module('myApp', []);app.controller('customersCtrl', function($scope) {$scope.cars = {car01 : {brand : "Ford", model : "Mustang", color : "red"},car02 : {brand : "Fiat", model : "500", color : "white"},car03 : {brand : "Volvo", model : "XC90", color : "black"}};});</script> </head> <body><div ng-app="myApp" ng-controller="customersCtrl"><select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars"></select>你選擇的是:{{selectedCar}}</div> </body> </html>運行結果：
?
轉載于:https://www.cnblogs.com/yk123/p/5912429.html
總結
以上是生活随笔為你收集整理的AngularJS(6)-选择框Select的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Greenplum table 之 外部
- 下一篇： 烟雨江湖冰心诀怎么学