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 相关文章推荐
jquery插件制作 表单验证实现代码
Aug 17 Javascript
javascript屏蔽右键代码
May 15 Javascript
纯JS实现本地图片预览的方法
Jul 31 Javascript
JS折半插入排序算法实例
Dec 02 Javascript
原生js实现移动端瀑布流式代码示例
Dec 18 Javascript
浅谈Sticky组件的改进实现
Mar 22 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
Jan 11 Javascript
利用vscode调试编译后的js代码详解
May 14 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
JS加密插件CryptoJS实现的Base64加密示例
Aug 16 Javascript
十分钟教你上手ES2020新特性
Feb 12 Javascript
如何在vue中使用jointjs过程解析
May 29 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
php 常用字符串函数总结
2008/03/15 PHP
Zend的MVC机制使用分析(二)
2013/05/02 PHP
解析ajax事件的调用顺序
2013/06/17 PHP
php使用异或实现的加密解密实例
2013/09/04 PHP
PHP-Java-Bridge使用笔记
2014/09/22 PHP
PHP图像处理类库MagickWand用法实例分析
2015/05/21 PHP
使用jscript实现二进制读写脚本代码
2008/06/09 Javascript
jquery下将选择的checkbox的id组成字符串的方法
2010/11/28 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
巧用Javascript的逻辑运算符
2016/12/02 Javascript
jQuery使用正则验证15/18身份证的方法示例
2017/04/27 jQuery
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
vue生命周期的探索
2019/04/03 Javascript
Javascript数组及类数组相关原理详解
2020/10/29 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
2020/11/18 Vue.js
[01:53]DOTA2超级联赛专访Zhou 五年职业青春成长
2013/05/29 DOTA
[06:57]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD 选手采访
2021/03/11 DOTA
Python中将字典转换为XML以及相关的命名空间解析
2015/10/15 Python
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
基于Django filter中用contains和icontains的区别(详解)
2017/12/12 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
Python paramiko使用方法代码汇总
2020/11/20 Python
荷兰浴室和卫浴网上商店:Badkamerxxl.nl
2020/10/06 全球购物
高三毕业生自我鉴定
2013/12/20 职场文书
公司联欢晚会主持词
2014/03/22 职场文书
门市房租房协议书
2014/12/04 职场文书
地震慰问信
2015/02/14 职场文书
联欢会开场白
2015/06/01 职场文书
班级管理经验交流材料
2015/11/02 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书
如何理解PHP核心特性命名空间
2021/05/28 PHP
解决vue中provide inject的响应式监听
2022/04/19 Vue.js
js判断两个数组相等的5种方法
2022/05/06 Javascript