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 相关文章推荐
把JS与CSS写在同一个文件里的书写方法
Jun 02 Javascript
javascript实现的在当前窗口中漂浮框的代码
Mar 15 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
Jan 14 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
Feb 19 Javascript
详解JavaScript数组的操作大全
Oct 19 Javascript
JS实现日期时间动态显示的方法
Dec 07 Javascript
jQuery获取checkbox选中的值
Jan 28 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
Sep 26 Javascript
轻松学习Javascript闭包
Mar 01 Javascript
vue 粒子特效的示例代码
Sep 19 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
Aug 20 Javascript
微信小程序picker组件两列关联使用方式
Oct 27 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
ThinkPHP的L方法使用简介
2014/06/18 PHP
php array_key_exists() 与 isset() 的区别
2016/10/24 PHP
从Ajax到JQuery Ajax学习
2007/02/14 Javascript
使用EXT实现无刷新动态调用股票信息
2008/11/01 Javascript
高性能web开发 如何加载JS,JS应该放在什么位置?
2010/05/14 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
2010/06/11 Javascript
基于JQuery的简单实现折叠菜单代码
2010/09/15 Javascript
容易被忽略的JS脚本特性
2011/09/13 Javascript
50款非常棒的 jQuery 插件分享
2012/03/29 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
JavaScript验证18位身份证号码最后一位正确性的实现代码
2014/08/07 Javascript
让JavaScript和其它资源并发下载的方法
2014/10/16 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
2016/08/05 Javascript
javascript 面向对象实战思想分享
2017/09/07 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
Vue.js组件使用props传递数据的方法
2019/10/19 Javascript
JS实现动态星空背景效果
2019/11/01 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
2021/02/05 Javascript
[44:30]完美世界DOTA2联赛PWL S2 GXR vs Magma 第一场 11.25
2020/11/26 DOTA
Python数据分析之真实IP请求Pandas详解
2016/11/18 Python
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
python中的随机函数random的用法示例
2018/01/27 Python
Python数据结构之图的应用示例
2018/05/11 Python
PyTorch中常用的激活函数的方法示例
2019/08/20 Python
Python列表元素常见操作简单示例
2019/10/25 Python
keras:model.compile损失函数的用法
2020/07/01 Python
最新pycharm安装教程
2020/11/18 Python
Python3爬虫RedisDump的安装步骤
2021/02/20 Python
canvas 如何绘制线段的实现方法
2018/07/12 HTML / CSS
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
退伍老兵事迹材料
2014/01/31 职场文书
学习党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
英语感谢信范文
2015/01/20 职场文书
投标单位介绍信
2015/05/05 职场文书
西游降魔篇观后感
2015/06/15 职场文书
Nginx实现负载均衡的项目实践
2022/03/18 Servers