AngularJS中下拉框的基本用法示例


Posted in Javascript onOctober 11, 2017

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

HTML正文:

<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for x in names"></select>
等价于:
<select>
<option ng-repeat="item in names">{{item}}</option>
</select>
<hr>
<!-- ng-repeat绑定的值为一个字符串,ng-options绑定的为一个对象 -->
<select ng-model="selectedSIte">
<option ng-repeat="item in sites" value="{{item.url}}">{{item.site}}</option>
</select>
<span>你选中的选址:{{selectedSIte}}</span>
<br><br>
<select ng-model="selectedSite" ng-options="x.site for x in sites"></select>
<span>你选中的选址:{{selectedSite}}</span>
<hr>
<!-- 因为对象数组没有key,angular默认使用数组的下标值作为key显示 -->
<select ng-model="AAAA" ng-options="x for (x, y) in sites"></select>
<span>你选择的值是: {{AAAA}}</span>
</div>

Javascript操作代码:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Google", "Baidu", "Taobao"];
$scope.sites = [{
 site : "Google", url : "http://www.google.com"},
{site : "Baidu", url : "http://www.baidu.com"},
{site : "Taobao", url : "http://www.taobao.com"} ];
});

效果:

AngularJS中下拉框的基本用法示例

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
JavaScript版代码高亮
Jun 26 Javascript
jquery 操作表格实现代码(多种操作打包)
Mar 20 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
Sep 04 Javascript
AngularJS directive返回对象属性详解
Mar 28 Javascript
Google 地图API Map()构造器详解
Aug 06 Javascript
xcode中获取js文件的路径方法(推荐)
Nov 05 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
May 02 Javascript
基于vue实现可搜索下拉框定制组件
Mar 26 Javascript
微信小程序实现之手势锁功能实例代码
Jul 19 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
Apr 15 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 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
解决JQuery全选/反选第二次失效的问题
Oct 11 #jQuery
React根据宽度自适应高度的示例代码
Oct 11 #Javascript
You might like
德生S2000电路分析
2021/03/02 无线电
PHP5下$_SERVER变量不再受magic_quotes_gpc保护的弥补方法
2012/10/31 PHP
codeigniter显示所有脚本执行时间的方法
2015/03/21 PHP
详解PHP使用日期时间处理器Carbon人性化显示时间
2017/08/10 PHP
PHP简单实现二维数组赋值与遍历功能示例
2017/10/19 PHP
laravel利用中间件做防非法登录和权限控制示例
2019/10/21 PHP
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
2012/09/14 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
js中遍历Map对象的简单实例
2016/08/08 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
2018/03/20 jQuery
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
vue监听对象及对象属性问题
2018/08/20 Javascript
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
微信小程序列表时间戳转换实现过程解析
2019/10/12 Javascript
Python删除指定目录下过期文件的2个脚本分享
2014/04/10 Python
Python实现的使用telnet登陆聊天室实例
2015/06/17 Python
Python实现删除当前目录下除当前脚本以外的文件和文件夹实例
2015/07/27 Python
Python编程实现微信企业号文本消息推送功能示例
2017/08/21 Python
Flask之flask-session的具体使用
2018/07/26 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
在python中将字符串转为json对象并取值的方法
2018/12/31 Python
Python+Selenium实现自动化的环境搭建的步骤(图文)
2020/09/01 Python
python给list排序的简单方法
2020/12/10 Python
纯CSS3实现绘制各种图形实现代码详细整理
2012/12/26 HTML / CSS
HTML5移动开发图片压缩上传功能
2016/11/09 HTML / CSS
酒店出纳岗位职责
2013/12/29 职场文书
总经理司机岗位职责
2014/02/06 职场文书
营销与策划专业求职信
2014/06/20 职场文书
巾帼标兵事迹材料
2014/12/26 职场文书
工程技术员岗位职责
2015/04/11 职场文书
2015年食品安全工作总结
2015/05/15 职场文书
电影复兴之路观后感
2015/06/02 职场文书
教师读书活动心得体会
2016/01/14 职场文书
餐厅如何利用“营销策略”扭转亏本局面
2019/10/15 职场文书
一篇文章带你深入了解Mysql触发器
2021/08/02 MySQL
戴尔Win11系统no bootable devices found解决教程
2022/09/23 数码科技