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 相关文章推荐
Use Word to Search for Files
Jun 15 Javascript
js 连接数据库如何操作数据库中的数据
Nov 23 Javascript
javascript setinterval 的正确语法如何书写
Jun 17 Javascript
JS实现同时搜索百度和必应的方法
Jan 27 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
Nov 17 Javascript
jQuery与Ajax以及序列化
Feb 01 Javascript
JavaScript实现相册弹窗功能(zepto.js)
Jun 21 Javascript
Angular路由简单学习
Dec 26 Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 Javascript
简单的Vue异步组件实例Demo
Dec 27 Javascript
详解关于element级联选择器数据回显问题
Feb 20 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 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
php自动跳转中英文页面
2008/07/29 PHP
PHP中CURL方法curl_setopt()函数的参数分享
2013/01/19 PHP
解析php开发中的中文编码问题
2013/08/08 PHP
PHP实现读取一个1G的文件大小
2013/08/24 PHP
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
2015/03/03 PHP
PHP简单实现记录网站访问量功能示例
2018/06/06 PHP
基于jQuery实现的当离开页面时出现提示的实现代码
2011/06/27 Javascript
jQuery实现 注册时选择阅读条款 左右移动
2013/04/11 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
2014/07/23 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
2015/03/14 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
2017/01/04 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
2017/05/25 Javascript
JS中Attr的用法详解
2017/10/09 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
详解vue路由篇(动态路由、路由嵌套)
2019/01/27 Javascript
JavaScript学习教程之cookie与webstorage
2019/06/23 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
2019/10/09 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
jQuery实现回到顶部效果
2020/10/19 jQuery
[38:23]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第二场 11.01
2020/11/02 DOTA
Python的包管理器pip更换软件源的方法详解
2016/06/20 Python
python程序 创建多线程过程详解
2019/09/23 Python
Python程序控制语句用法实例分析
2020/01/14 Python
Pycharm和Idea支持的vim插件的方法
2020/02/21 Python
Python环境下安装PyGame和PyOpenGL的方法
2020/03/25 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
如何更换python默认编辑器的背景色
2020/08/10 Python
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
Dr. Martens马汀博士官网:马丁靴始祖品牌
2016/10/15 全球购物
函授毕业生的自我鉴定
2013/11/26 职场文书
教育专业毕业生推荐信
2014/07/10 职场文书
房产公证委托书范本
2014/09/20 职场文书
大学生活委员竞选稿
2015/11/21 职场文书
python实现会员信息管理系统(List)
2022/03/18 Python