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 相关文章推荐
基于jquery扩展漂亮的下拉框可以二次修改
Nov 19 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
Jan 26 Javascript
jQuery实现的五子棋游戏实例
Jun 13 Javascript
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
js编写简单的计时器功能
Jul 15 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
Jul 17 Javascript
JS+HTML5实现图片在线预览功能
Jul 22 Javascript
React 高阶组件入门介绍
Jan 11 Javascript
js数据类型检测总结
Aug 05 Javascript
vue 表单之通过v-model绑定单选按钮radio
May 13 Javascript
js实现缓动动画
Nov 25 Javascript
JavaScript async/await原理及实例解析
Dec 02 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分页显示制作详细讲解
2006/10/09 PHP
php封装的单文件(图片)上传类完整实例
2016/10/18 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/02/09 Javascript
将函数的实际参数转换成数组的方法
2010/01/25 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
2014/08/18 Javascript
JQuery+EasyUI轻松实现步骤条效果
2016/02/22 Javascript
JQuery ztree带筛选、异步加载实例讲解
2016/02/25 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
2016/09/04 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
详解vue-cli中模拟数据的两种方法
2018/07/03 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
2018/12/13 Javascript
ES6 Promise对象的含义和基本用法分析
2019/06/14 Javascript
countup.js实现数字动态叠加效果
2019/10/17 Javascript
JavaScript switch语句使用方法简介
2019/12/30 Javascript
js键盘事件实现人物的行走
2020/01/17 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
python实现协同过滤推荐算法完整代码示例
2017/12/15 Python
python list是否包含另一个list所有元素的实例
2018/05/04 Python
selenium+python实现自动化登录的方法
2018/09/04 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
python3.6编写的单元测试示例
2019/08/17 Python
Python接口测试数据库封装实现原理
2020/05/09 Python
Django QuerySet查询集原理及代码实例
2020/06/13 Python
Python sqlalchemy时间戳及密码管理实现代码详解
2020/08/01 Python
如何让PyQt5中QWebEngineView与JavaScript交互
2020/10/21 Python
python实现图像高斯金字塔的示例代码
2020/12/11 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
冰淇淋开店创业计划书
2014/02/01 职场文书
生物科学专业职业规划书范文
2014/02/11 职场文书
优秀广告词大全
2014/03/19 职场文书
2014年人力资源部工作总结
2014/11/19 职场文书
蓬莱阁导游词
2015/02/04 职场文书
八年级物理教学反思
2016/02/19 职场文书
详解使用内网穿透工具Ngrok代理本地服务
2022/03/31 Servers