angularjs select 赋值 ng-options配置方法


Posted in Javascript onFebruary 28, 2018

数组方式

数据是数组

$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配置方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript操纵Cookie实现购物车程序
Nov 23 Javascript
javascript入门基础之私有变量
Feb 23 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
Jan 15 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
Oct 15 Javascript
鼠标拖拽移动子窗体的JS实现
Feb 25 Javascript
给js文件传参数(详解)
Jul 13 Javascript
Sortable.js拖拽排序使用方法解析
Nov 04 Javascript
浅谈Angular 的变化检测的方法
Mar 01 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 Javascript
详解JS数组方法
Nov 20 Javascript
vue实现input输入模糊查询的三种方式
Aug 14 Vue.js
select获取下拉框的值 下拉框默认选中方法
Feb 28 #Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 #Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
Feb 28 #Javascript
Vue-Router模式和钩子的用法
Feb 28 #Javascript
angularjs 获取默认选中的单选按钮的value方法
Feb 28 #Javascript
angularJS的radio实现单项二选一的使用方法
Feb 28 #Javascript
vue cli 全面解析
Feb 28 #Javascript
You might like
PHP保留两位小数并且四舍五入及不四舍五入的方法
2013/09/22 PHP
PHP生成自定义长度随机字符串的函数分享
2014/05/04 PHP
Three.js源码阅读笔记(物体是如何组织的)
2012/12/27 Javascript
node.js中的console用法总结
2014/12/15 Javascript
jQuery使用animate创建动画用法实例
2015/08/07 Javascript
jquery组件WebUploader文件上传用法详解
2020/10/23 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
2017/02/07 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
2018/09/14 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
2019/04/20 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
2019/09/11 Javascript
微信小程序实现音频文件播放进度的实例代码
2020/03/02 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
2020/03/09 Javascript
JS实现网页时钟特效
2020/03/25 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
2021/01/27 Vue.js
[01:44]Ti10举办地公布
2019/08/25 DOTA
Python语言实现获取主机名根据端口杀死进程
2016/03/31 Python
浅谈python 里面的单下划线与双下划线的区别
2017/12/01 Python
Python面向对象编程之继承与多态详解
2018/01/16 Python
pandas 对series和dataframe进行排序的实例
2018/06/09 Python
如何利用Boost.Python实现Python C/C++混合编程详解
2018/11/08 Python
OpenCV3.0+Python3.6实现特定颜色的物体追踪
2019/07/23 Python
pandas DataFrame的修改方法(值、列、索引)
2019/08/02 Python
灵活运用CSS3特性绘制简易版围棋效果
2016/09/28 HTML / CSS
潘多拉珠宝英国官方网上商店:PANDORA英国
2018/06/12 全球购物
Lululemon英国官网:加拿大瑜伽服装品牌
2019/01/14 全球购物
C#笔试题
2015/07/14 面试题
应用心理学个人求职信范文
2013/12/11 职场文书
总会计师岗位职责
2014/02/19 职场文书
会计与审计专业自荐信范文
2014/03/15 职场文书
护士演讲稿优秀范文
2014/04/30 职场文书
模具设计与制造专业自荐书
2014/07/01 职场文书
超市采购员岗位职责
2015/04/07 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书
团支部组织委员竞选稿
2015/11/21 职场文书
MySQL中TIMESTAMP类型返回日期时间数据中带有T的解决
2022/12/24 MySQL