AngularJS Select(选择框)
来源:互联网 发布:c语言算法是什么 编辑:程序博客网 时间:2024/05/23 20:58
1、Select概述
AngularJS 中可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出
<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 = ["Google", "Runoob", "Taobao"]; });</script>
2、数据源为对象
选择的值为在 key-value 对中的key:
<div ng-app="myApp" ng-controller="myCtrl"> <p>选择一辆车:</p> <select ng-model="selectedCar" ng-options="x for (x, y) in cars"> </select> <h1>你选择的是: {{selectedCar.brand}}</h1> <h2>模型: {{selectedCar.model}}</h2> <h3>颜色: {{selectedCar.color}}</h3> <p>注意选中的值是一个对象。</p></div><script> var app = angular.module('myApp', []); app.controller('myCtrl', 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>
选择的值为在 key-value 对中的value对象一个属性:
<div ng-app="myApp" ng-controller="myCtrl"> <p>选择一辆车:</p> <select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars"> </select> <p>你选择的是: {{selectedCar.brand}}</p> <p>型号为: {{selectedCar.model}}</p> <p>颜色为: {{selectedCar.color}}</p> <p>下拉列表中的选项也可以是对象的属性。</p></div><script> var app = angular.module('myApp', []); app.controller('myCtrl', 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>
3、ng-options 与 ng-repeat
也可以使用ng-repeat 指令来创建下拉列表。
ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表,但 ng-options 指令更适合创建下拉列表,它有以下优势:
使用 ng-options 的选项的一个对象, ng-repeat 是一个字符串。
1)ng-repeat 有局限性,选择的值是一个字符串:
<div ng-app="myApp" ng-controller="myCtrl"> <p>选择网站:</p> <select ng-model="selectedSite"> <option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option> </select> <h1>你选择的是: {{selectedSite}}</h1></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) { $scope.sites = [ {site : "Google", url : "http://www.google.com"}, {site : "Runoob", url : "http://www.runoob.com"}, {site : "Taobao", url : "http://www.taobao.com"} ];});</script>
2)使用 ng-options 指令,选择的值是一个对象:
<div ng-app="myApp" ng-controller="myCtrl"><p>选择网站:</p><select ng-model="selectedSite" ng-options="x.site for x in sites"></select><h1>你选择的是: {{selectedSite.site}}</h1><p>网址为: {{selectedSite.url}}</p></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) { $scope.sites = [ {site : "Google", url : "http://www.google.com"}, {site : "Runoob", url : "http://www.runoob.com"}, {site : "Taobao", url : "http://www.taobao.com"} ];});</script>
0 0
- AngularJS Select(选择框)
- AngularJS Select(选择框)
- AngularJS Select(选择框)
- AngularJS Select(选择框)
- AngularJS Select(选择框)
- AngularJS Select(选择框)
- AngularJS Select(选择框!)
- AngularJS Select(选择框)
- angularJS的选择框select
- angularJS的select(选择框)
- AngularJS select选择框初始化问题
- angularjs Select下拉选择宽
- AngularJs 基础教程 —— Select(选择框)
- AngularJs选择框
- angularJs select框用法总结
- angularJs操作select列表框
- angularjs select
- angularjs select
- Ubuntu Kylin 下安装Caffe
- ios颜色生成图片的方法
- [转载]linux下使用ffmpeg将amr转成mp3
- Retrofit2 源码分析
- [6]访问控制权限 0X02
- AngularJS Select(选择框)
- APPMES同步后编译错误
- Eclipes 菜鳥筆記一
- HDU(1009)FatMouse' Trade(贪心)
- Spring 教程
- tjut 4869
- Unreal4 shader 杂1
- 余弦距离、欧氏距离和杰卡德相似性度量的对比分析
- UVa 11090 Going in Cycle! BellmanFord 判负权环