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学习笔记5 类和对象
Jan 11 Javascript
文本框根据输入内容自适应高度的代码
Oct 24 Javascript
js中return false(阻止)的用法
Aug 14 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
Aug 22 Javascript
JQUERY简单按钮轮换选中效果实现方法
May 07 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
Jun 22 Javascript
关于使用js算总价的问题
Jun 23 Javascript
详解如何用typescript开发koa2的二三事
Nov 13 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
Nov 21 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 Javascript
javascript实现倒计时提示框
Mar 02 Javascript
从原生JavaScript到React深入理解
Jul 23 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
libmysql.dll与php.ini是否真的要拷贝到c:\windows目录下呢
2010/03/15 PHP
php读取二进制流(C语言结构体struct数据文件)的深入解析
2013/06/13 PHP
PHP微信红包API接口
2015/12/05 PHP
一些常用的JS功能函数代码
2009/06/23 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
jQuery中after的两种用法实例
2013/07/03 Javascript
Node.js实现JS文件合并小工具
2016/02/02 Javascript
Jquery组件easyUi实现表单验证示例
2016/08/23 Javascript
微信小程序 Storage API实例详解
2016/10/02 Javascript
JS仿JQuery选择器功能
2017/03/08 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
2017/04/11 Javascript
vue实现点击图片放大效果
2017/08/15 Javascript
webpack external模块的具体使用
2018/03/10 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
JS如何在数组指定位置插入元素
2020/03/10 Javascript
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
使用Python求解最大公约数的实现方法
2015/08/20 Python
Python 对象中的数据类型
2017/05/13 Python
python 全局变量的import机制介绍
2017/09/07 Python
python+pygame简单画板实现代码实例
2017/12/13 Python
Flask框架使用DBUtils模块连接数据库操作示例
2018/07/20 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
前后端结合实现amazeUI分页效果
2020/08/21 HTML / CSS
Alba Moda德国网上商店:意大利时尚女装销售
2016/11/14 全球购物
纽约家具、家居装饰和地毯店:ABC Carpet & Home
2017/06/21 全球购物
Halston Heritage官网:简洁的日装,稍显奢华的晚装
2018/11/20 全球购物
教师业务培训方案
2014/05/01 职场文书
高中课程设置方案
2014/05/28 职场文书
银行转正自我鉴定
2014/09/29 职场文书
个人剖析材料范文
2014/09/30 职场文书
诉讼授权委托书
2014/10/15 职场文书
入党函调证明材料
2014/12/24 职场文书
红领巾广播站广播稿
2015/08/19 职场文书
导游词之千岛湖
2019/09/23 职场文书
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang