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 getJSON 处理json数据的代码
Jul 26 Javascript
js完美的div拖拽实例代码
Jan 22 Javascript
浅谈JavaScript中的String对象常用方法
Feb 25 Javascript
JQuery给select添加/删除节点的实现代码
Apr 26 Javascript
基于javascript实现数字英文验证码
Jan 25 Javascript
vue select二级联动第二级默认选中第一个option值的实例
Jan 10 Javascript
JavaScript分步实现一个出生日期的正则表达式
Mar 22 Javascript
Vue.js实现的表格增加删除demo示例
May 22 Javascript
vue展示dicom文件医疗系统的实现代码
Aug 27 Javascript
vue使用codemirror的两种用法
Aug 27 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
Jul 20 Javascript
ES5和ES6中类的区别总结
Dec 21 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
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
PHP 变量类型的强制转换
2009/10/23 PHP
PHP实现对站点内容外部链接的过滤方法
2014/09/10 PHP
PHP验证码类ValidateCode解析
2017/01/07 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
如何学习Javascript入门指导
2013/11/01 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
2014/09/21 Javascript
AngularJS模块学习之Anchor Scroll
2016/01/19 Javascript
AngularJS中$watch和$timeout的使用示例
2016/09/20 Javascript
javascript实现文字无缝滚动效果
2017/08/26 Javascript
详解a++和++a的区别
2017/08/30 Javascript
AngularJS实现的锚点楼层跳转功能示例
2018/01/02 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
2018/11/09 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
2019/01/21 Javascript
微信小程序城市选择及搜索功能的方法
2019/03/22 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
JS中超越现实的匿名函数用法实例分析
2019/06/21 Javascript
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
详解python中的线程
2018/02/10 Python
python字符串查找函数的用法详解
2019/07/08 Python
如何在Django配置文件里配置session链接
2019/08/06 Python
python函数参数(必须参数、可变参数、关键字参数)
2019/08/16 Python
python super函数使用方法详解
2020/02/14 Python
浅谈SciPy中的optimize.minimize实现受限优化问题
2020/02/29 Python
python开发一款翻译工具
2020/10/10 Python
详解HTML5新增标签
2017/11/27 HTML / CSS
全球知名旅游社区法国站点:TripAdvisor法国
2016/08/03 全球购物
Europcar英国:英国汽车和货车租赁
2017/01/21 全球购物
高一学生期末评语
2014/04/25 职场文书
感恩教育月活动总结
2014/07/07 职场文书
个人党性分析材料
2014/12/19 职场文书
2015年工会工作总结
2015/03/30 职场文书
高中地理教学反思
2016/02/19 职场文书
vue cli4中mockjs在dev环境和build环境的配置详情
2022/04/06 Vue.js
vue elementUI表格控制对应列
2022/04/13 Vue.js