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 相关文章推荐
JavaScript面向对象程序设计三 原型模式(上)
Dec 21 Javascript
JavaScript中的正则表达式简明总结
Apr 04 Javascript
javascript时间差插件分享
Jul 18 Javascript
canvas实现绘制吃豆鱼效果
Jan 12 Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 Javascript
webpack配置导致字体图标无法显示的解决方法
Mar 06 Javascript
layui之select的option叠加问题的解决方法
Mar 08 Javascript
关于HTML5的data-*自定义属性的总结
May 05 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
Aug 24 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
Sep 14 Javascript
JS错误处理与调试操作实例分析
Apr 13 Javascript
element-ui点击查看大图的方法示例
Dec 14 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的面向对象编程
2006/10/09 PHP
PHP自毁程序(慎用)
2015/07/09 PHP
修改Laravel5.3中的路由文件与路径
2016/08/10 PHP
PHP实现的简单操作SQLite数据库类与用法示例
2017/06/19 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
找出字符串中出现次数最多的字母和出现次数精简版
2012/11/07 Javascript
javascript框架设计读书笔记之种子模块
2014/12/02 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
javascript HTML5 canvas实现打砖块游戏
2020/06/18 Javascript
js实现移动端微信页面禁止字体放大
2017/02/16 Javascript
利用Vue v-model实现一个自定义的表单组件
2017/04/27 Javascript
JS实现的RC4加密算法示例
2018/08/16 Javascript
JavaScript继承的特性与实践应用深入详解
2018/12/30 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
2019/02/20 Javascript
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
浅谈如何优雅处理JavaScript异步错误
2019/11/12 Javascript
Node.js API详解之 V8模块用法实例分析
2020/06/05 Javascript
Linux下使用python调用top命令获得CPU利用率
2015/03/10 Python
深入解析Python编程中JSON模块的使用
2015/10/15 Python
Python实现PS图像调整黑白效果示例
2018/01/25 Python
对Tensorflow中的矩阵运算函数详解
2018/07/27 Python
Jupyter notebook 远程配置及SSL加密教程
2020/04/14 Python
在python下实现word2vec词向量训练与加载实例
2020/06/09 Python
Django contrib auth authenticate函数源码解析
2020/11/12 Python
打印机墨盒:123Inkjets
2017/02/16 全球购物
Janie and Jack美国官网:GAP旗下的高档童装品牌
2019/09/09 全球购物
俄罗斯香水在线商店:AromaCode
2019/12/04 全球购物
美国家居装饰购物网站:Amanda Lindroth
2020/03/25 全球购物
经典c++面试题六
2012/01/18 面试题
采购文员岗位职责
2013/11/20 职场文书
村容村貌整治方案
2014/05/21 职场文书
工地安全生产标语
2014/06/06 职场文书
班级学习雷锋活动总结
2014/07/04 职场文书
高中综合实践活动总结
2014/07/07 职场文书
承兑汇票延期证明
2015/06/23 职场文书
手把手教你使用TensorFlow2实现RNN
2021/07/15 Python