AngularJS中下拉框的高级用法示例


Posted in Javascript onOctober 11, 2017

本文实例讲述了AngularJS中下拉框的高级用法。分享给大家供大家参考,具体如下:

HTML正文:

<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程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 判断判断某个对象是Object还是一个Array
Jan 28 Javascript
两个JavaScript jsFiddle JSBin在线调试器
Mar 14 Javascript
jquery对象和javascript对象即DOM对象相互转换
Aug 07 Javascript
一个js过滤空格的小函数
Oct 10 Javascript
js实现固定显示区域内自动缩放图片的方法
Jul 18 Javascript
javascript闭包(Closure)用法实例简析
Nov 30 Javascript
老生常谈jquery中detach()和remove()的区别
Mar 02 Javascript
jQuery导航条固定定位效果实例代码
May 26 jQuery
JavaScript两种计时器的实例讲解
Jan 31 Javascript
Vue的生命周期操作示例
Sep 17 Javascript
Vant picker 多级联动操作
Nov 02 Javascript
基于JavaScript实现年月日三级联动
Jun 22 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
Oct 11 #Javascript
AngularJS中下拉框的基本用法示例
Oct 11 #Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
Oct 11 #Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 #Javascript
AngularJS实现表单元素值绑定操作示例
Oct 11 #Javascript
JavaScript for循环 if判断语句(学习笔记)
Oct 11 #Javascript
js处理包含中文的字符串实例
Oct 11 #Javascript
You might like
PHP中的错误处理、异常处理机制分析
2012/05/07 PHP
php读取mysql的简单实例
2014/01/15 PHP
php去除头尾空格的2种方法
2015/03/16 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
2011/02/23 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
2011/07/26 Javascript
JS自动适应的图片弹窗实例
2013/06/29 Javascript
Jquery的hover方法让鼠标经过li时背景变色
2013/09/06 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
angularjs实现过滤并替换关键字小功能
2017/09/19 Javascript
Vue-Router实现组件间跳转的三种方法
2017/11/07 Javascript
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
vue实现点击追加选中样式效果
2019/11/01 Javascript
JavaScript实现简单进度条效果
2020/03/25 Javascript
详解vue 组件
2020/06/11 Javascript
通过实例解析json与jsonp原理及使用方法
2020/09/27 Javascript
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
详细解读Python的web.py框架下的application.py模块
2015/05/02 Python
django实现分页的方法
2015/05/26 Python
NetworkX之Prim算法(实例讲解)
2017/12/22 Python
python 获取list特定元素下标的实例讲解
2018/04/09 Python
Python学习_几种存取xls/xlsx文件的方法总结
2018/05/03 Python
Python Dataframe 指定多列去重、求差集的方法
2018/07/10 Python
python点击鼠标获取坐标(Graphics)
2019/08/10 Python
应届大学生自荐信格式
2013/09/21 职场文书
绿化先进工作者事迹材料
2014/01/30 职场文书
教师四风对照检查材料思想汇报
2014/09/17 职场文书
禁毒心得体会范文
2016/01/15 职场文书
职场新人刚入职工作总结该怎么写?
2019/05/15 职场文书
企业转让协议书(范文2篇)
2019/08/15 职场文书
详解Django中 render() 函数的使用方法
2021/04/22 Python
redis requires ruby version2.2.2的解决方案
2021/07/15 Redis