首页 > 代码库 > AngularJS学习篇(十)
AngularJS学习篇(十)
AngularJS Select(选择框)
使用 ng-options 创建选择框
在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出,如下实例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/{{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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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"}
AngularJS学习篇(十)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。