angularjs select 赋值 ng-options配置方法
时间:2019-04-13
本文章向大家介绍angularjs select 赋值 ng-options配置方法,主要包括angularjs select 赋值 ng-options配置方法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
数组方式
数据是数组
$scope.years = [2014, 2015, 2016];
页面元素
<select ng-model="item" ng-options="item as y for y in years"> </select>
设置默认值
如果需要设置默认的选项,可以先设置一个参数:
$scope.item = 2016; $scope.years = [2014, 2015, 2016];
对象数组方式
数据是对象数组
$scope.sites = [ {site : "baidu", url : "https://www.baidu.com"}, {site : "163", url : "http://www.163.com"}, {site : "sina", url : "http://www.sina.com"} ];
页面元素
<select ng-model="s.site" ng-options="s.site as s.site group by site.group for s in sites"> </select>
设置默认值
如果需要设置默认的选项,可以先设置一个参数:
$scope.site = "163"; $scope.sites = [ {site : "baidu", url : "https://www.baidu.com"}, {site : "163", url : "http://www.163.com"}, {site : "sina", url : "http://www.sina.com"} ];
Key-Vules对象数组方式
数据是对象数组
$scope.cars = { car1 : {brand : "BYD", model : "Y50", color : "red"}, car2 : {brand : "CC", model : "HF", color : "white"}, car3 : {brand : "JL", model : "JL10D", color : "black"} };
页面元素
<select ng-model="myCar" ng-options="y.brand for (x, y) in cars"> </select>
设置默认值
如果需要设置默认的选项,可以先设置一个参数:
$scope.site = "BYD"; $scope.cars = { car1 : {brand : "BYD", model : "Y50", color : "red"}, car2 : {brand : "CC", model : "HF", color : "white"}, car3 : {brand : "JL", model : "JL10D", color : "black"} };
angularjs ng-options官方API
数组类型:
label for value in array select as label for value in array label group by group for value in array select as label group by group for value in array track by trackexpr
对象类型:
label for (key , value) in object select as label for (key , value) in object label group by group for (key, value) in object select as label group by group for (key, value) in ob
以上这篇angularjs select 赋值 ng-options配置方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
- 1609: [Usaco2008 Feb]Eating Together麻烦的聚餐
- 1602: [Usaco2008 Oct]牧场行走
- 【LeetCode 500】关关的刷题日记27 Keyboard Row
- 1601: [Usaco2008 Oct]灌水
- 1657: [Usaco2006 Mar]Mooo 奶牛的歌声
- 1610: [Usaco2008 Feb]Line连线游戏
- 1012: [JSOI2008]最大数maxnumber
- 1430: 小猴打架
- 1202: [HNOI2005]狡猾的商人
- 1059: [ZJOI2007]矩阵游戏
- 3039: 玉蟾宫
- 大公司都有哪些开源项目之腾讯
- Vue拖拽组件开发实例
- 一小时培训之神经网络入门
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 12种降低开发者工作效率的方法
- 想掌握Android面试官必问的 Binder 机制?那别想绕开 Binder 驱动源码分析!
- TCP协议的3次握手与4次挥手过程详解
- 高并发系统三大利器之降级
- Dart核心基础List概述
- 像SELECT*一样手撸Query DSL——ElasticSearch下篇
- 3D场景编辑导出-LayaAir引擎Unity插件使用详解
- 通达OA绕过身份验证+任意文件上传RCE
- 微信小程序开发实战(23):WebSocket实战
- 谁告诉的你们Python是强类型语言!站出来,保证不打你!
- 项目内容细分
- 『算法理论学』深度学习推理加速方法之网络层与算子融合
- 【剑指Offer】链表中倒数第k个字节
- pyplot只有两个数值做barplot
- 两个矩阵对应位置相除