AngularJS Select(选择框)使用详解


Posted in Javascript onJanuary 18, 2017

1、Select概述

AngularJS 中可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出

<div ng-app="myApp" ng-controller="myCtrl">
  <select ng-model="selectedName" ng-options="x for x in names">
  </select>
</div>
<script>
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope) {
    $scope.names = ["Google", "Runoob", "Taobao"];
  });
</script>

2、数据源为对象

选择的值为在 key-value 对中的key:

<div ng-app="myApp" ng-controller="myCtrl">
  <p>选择一辆车:</p>
  <select ng-model="selectedCar" ng-options="x for (x, y) in cars">
  </select>

  <h1>你选择的是: {{selectedCar.brand}}</h1>
  <h2>模型: {{selectedCar.model}}</h2>
  <h3>颜色: {{selectedCar.color}}</h3>

  <p>注意选中的值是一个对象。</p>
</div>

<script>
  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"}
    }
  });
</script>

选择的值为在 key-value 对中的value对象一个属性:

<div ng-app="myApp" ng-controller="myCtrl">
  <p>选择一辆车:</p>
  <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>

<script>
  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"}
    }
  });
</script>

3、ng-options 与 ng-repeat

也可以使用ng-repeat 指令来创建下拉列表。
ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表,但 ng-options 指令更适合创建下拉列表,它有以下优势:
使用 ng-options 的选项的一个对象, ng-repeat 是一个字符串。

1)ng-repeat 有局限性,选择的值是一个字符串:

<div ng-app="myApp" ng-controller="myCtrl">
  <p>选择网站:</p>
  <select ng-model="selectedSite">
  <option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
  </select>
  <h1>你选择的是: {{selectedSite}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.sites = [
    {site : "Google", url : "http://www.google.com"},
    {site : "Runoob", url : "http://www.runoob.com"},
    {site : "Taobao", url : "http://www.taobao.com"}
  ];
});
</script>

2)使用 ng-options 指令,选择的值是一个对象:

<div ng-app="myApp" ng-controller="myCtrl">

<p>选择网站:</p>

<select ng-model="selectedSite" ng-options="x.site for x in sites">
</select>

<h1>你选择的是: {{selectedSite.site}}</h1>
<p>网址为: {{selectedSite.url}}</p>

</div>

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
二级域名或跨域共享Cookies的实现方法
Aug 07 Javascript
js自定义事件及事件交互原理概述(一)
Feb 01 Javascript
nullJavascript中创建对象的五种方法实例
May 07 Javascript
JS延时器提示框的应用实例代码解析
Apr 27 Javascript
JS限制条件补全问题实例分析
Dec 16 Javascript
angular 动态组件类型详解(四种组件类型)
Feb 22 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
Jun 25 Javascript
快速搭建React的环境步骤详解
Nov 06 Javascript
vue路由组件按需加载的几种方法小结
Jul 12 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
Oct 17 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 Javascript
JS实现购物车基本功能
Nov 08 Javascript
基于JavaScript实现屏幕滚动效果
Jan 18 #Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
Jan 18 #Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 #Javascript
原生Javascript插件开发实践
Jan 18 #Javascript
js实现炫酷的左右轮播图
Jan 18 #Javascript
jQuery实现别踩白块儿网页版小游戏
Jan 18 #Javascript
工厂模式在JS中的实践
Jan 18 #Javascript
You might like
smarty基础之拼接字符串的详解
2013/06/18 PHP
html静态页面调用php文件的方法
2014/11/13 PHP
PHP中STDCLASS用法实例分析
2016/11/11 PHP
PHP判断函数是否被定义的方法
2019/06/21 PHP
超越Jquery_01_isPlainObject分析与重构
2010/10/20 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
2011/04/07 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
2012/03/07 Javascript
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
js如何实现设计模式中的模板方法
2013/07/23 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
2016/01/14 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
尝试自己动手用react来写一个分页组件(小结)
2018/02/09 Javascript
利用vue和element-ui设置表格内容分页的实例
2018/03/02 Javascript
在小程序中使用Echart图表的示例代码
2018/08/02 Javascript
vue+moment实现倒计时效果
2019/08/26 Javascript
Typescript的三种运行方式(小结)
2019/09/18 Javascript
uni-app如何实现增量更新功能
2020/01/03 Javascript
jquery实现上传图片功能
2020/06/29 jQuery
[41:52]2018DOTA2亚洲邀请赛3月29日 小组赛A组 TNC VS OpTic
2018/03/30 DOTA
[01:03:22]LGD vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
详解Python验证码识别
2016/01/25 Python
Python中标准模块importlib详解
2017/04/16 Python
python复制文件到指定目录的实例
2018/04/27 Python
基于python3的socket聊天编程
2020/02/17 Python
jupyter notebook实现显示行号
2020/04/13 Python
简单了解Java Netty Reactor三种线程模型
2020/04/26 Python
Tensorflow中批量读取数据的案列分析及TFRecord文件的打包与读取
2020/06/30 Python
使用python批量修改XML文件中图像的depth值
2020/07/22 Python
校园学雷锋活动月总结
2014/03/09 职场文书
中华魂演讲稿
2014/05/13 职场文书
优秀乡村医生先进事迹材料
2014/08/23 职场文书
酒店爱岗敬业演讲稿
2014/09/02 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
看雷锋电影观后感
2015/06/10 职场文书
Python中22个万用公式的小结
2021/07/21 Python
python中Pyqt5使用Qlabel标签播放视频
2022/04/22 Python