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 相关文章推荐
FileUpload 控件 禁止手动输入或粘贴的实现代码
Apr 07 Javascript
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
Jun 29 Javascript
3款实用的在线JS代码工具(国外)
Mar 15 Javascript
jQuery之$(document).ready()使用介绍
Apr 05 Javascript
javascript的渐进增强与平稳退化浅谈
Nov 12 Javascript
node.js中的fs.fsyncSync方法使用说明
Dec 15 Javascript
JavaScript函数使用的基本教程
Jun 04 Javascript
bootstrapValidator自定验证方法写法
Dec 01 Javascript
Bootstrap CSS布局之列表
Dec 15 Javascript
教你如何用node连接redis的示例代码
Jul 12 Javascript
详解Vue源码学习之双向绑定
Apr 10 Javascript
基于JavaScript实现表格隔行换色
May 08 Javascript
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实现session自定义会话处理器的方法
2015/01/27 PHP
codeigniter发送邮件并打印调试信息的方法
2015/03/21 PHP
详解Yii2.0使用AR联表查询实例
2017/06/16 PHP
PHP笛卡尔积实现算法示例
2018/07/30 PHP
用JavaScript实现仿Windows关机效果
2007/03/10 Javascript
jQuery入门问答 整理的几个常见的初学者问题
2010/02/22 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
2011/05/25 Javascript
仿新浪微博返回顶部的jquery实现代码
2012/10/01 Javascript
jquery得到font-size属性值实现代码
2013/09/30 Javascript
jQuery性能优化的38个建议
2014/03/04 Javascript
15款jQuery分布引导插件分享
2015/02/04 Javascript
JS判断字符串包含的方法
2015/05/05 Javascript
ECMAScript6块级作用域及新变量声明(let)
2015/06/12 Javascript
jquery实现简单的瀑布流布局
2016/12/11 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
2017/06/29 jQuery
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
Angular使用Restful的增删改
2018/12/28 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
2020/10/22 Javascript
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
Python中单、双下划线的区别总结
2017/12/01 Python
python使用pdfminer解析pdf文件的方法示例
2018/12/20 Python
Python3.5字符串常用操作实例详解
2019/05/01 Python
用python按照图像灰度值统计并筛选图片的操作(PIL,shutil,os)
2020/06/04 Python
JAVA SWT事件四种写法实例解析
2020/06/05 Python
python向企业微信发送文字和图片消息的示例
2020/09/28 Python
天猫国际进口超市直营:官方直采,一站购齐
2017/12/11 全球购物
营销专业应届生求职信
2013/11/26 职场文书
大学生自我鉴定范文
2013/12/28 职场文书
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
幼儿园儿童节活动主持词+串词大全
2014/03/21 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
入党推优材料
2014/06/02 职场文书
公司员工辞职信范文
2015/05/12 职场文书
回复函范文
2015/07/14 职场文书
你喜欢篮球吗?Python实现篮球游戏
2021/06/11 Python
详解Mysql事务并发(脏读、不可重复读、幻读)
2022/04/29 MySQL