AngularJS下拉框的高级应用
2017-01-08 23:04
393 查看
HTML正文:
Javascript操作代码:
效果:
<body ng-app="myApp"> <!-- 对象内部属性遍历:x--key y---value --> <div ng-controller="myctr01"> {{sites}}<br> <select ng-model="site" ng-options="x for (x, y) in sites"></select> 选择的网址:<span>{{site}}</span> </div> <div ng-controller="myCtrl"> <p>选择一辆车:</p> <!-- 这里y标识成员元素对象,并且使用该对象的brand属性作为显示文本,select的值与y绑定 --> <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>
Javascript操作代码:
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"} } //简单对象 $scope.sites = { site01 : "Google", site02 : "Baidu", site03 : "Taobao" }; }); app.controller("myctr01",function($scope){ $scope.sites = { site01 : "Google", site02 : "Baidu", site03 : "Taobao" }; });
效果:
相关文章推荐
- AngularJS 下拉框的基础应用
- AngularJS中下拉框的高级用法示例
- SAS命令应用高级技巧--如何从一批SCL,SOURCE文件中查找或替换某字符串
- ASP.NET高级应用(1)
- Servlet中jdbc应用高级篇(连接池基本)
- 《windows应用高级编程-C#编程篇》书中程序的小问题及改进
- PHP 日期时间函数的高级应用技巧
- 菜鸟QiFang学数据结构系列(一):一维数组的高级应用--一个可容纳超多位数的求N!的程序!
- Servlet中jdbc应用高级篇(得到和返回连接 )
- JDBC 高级数据类型的应用
- SQL_Injection高级应用
- ASP.NET高级应用(2)
- Jar文件高级应用指南
- JavaScript高级应用:使用DOM技术操纵文档
- Servlet中jdbc应用高级(创建connection)
- 实验二:电子邮件服务器的安装和管理及邮件收发的高级应用
- ASP.NET高级应用(3)
- Jar文件高级应用指南
- Servlet中jdbc应用高级篇(概述)
- JavaScrip高级应用:操作模态与非模态对话框