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 相关文章推荐
js querySelector和getElementById通过id获取元素的区别
Apr 20 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
Nov 06 Javascript
让你一句话理解闭包(简单易懂)
Jun 03 Javascript
用jquery获取自定义的标签属性的值简单实例
Sep 17 Javascript
jQuery.cookie.js使用方法及相关参数解释
Mar 06 Javascript
详解在express站点中使用ejs模板引擎
Sep 21 Javascript
JS开发中基本数据类型具体有哪几种
Oct 19 Javascript
webpack写jquery插件的环境配置
Dec 21 jQuery
浅谈Vue Element中Select下拉框选取值的问题
Mar 01 Javascript
Vue实现todolist删除功能
Jun 26 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
Mar 13 Javascript
js实现拖拽与碰撞检测
Sep 18 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 时间日期操作实战
2011/08/26 PHP
php程序员应具有的7种能力小结
2014/11/27 PHP
yii数据库的查询方法
2015/12/28 PHP
前端必学之PHP语法基础
2016/01/01 PHP
PHP实现通过URL提取根域名
2016/03/31 PHP
php实现的rc4加密解密类定义与用法示例
2018/08/16 PHP
淘宝搜索框效果实现分析
2011/03/05 Javascript
js的Prototype属性解释及常用方法
2014/05/08 Javascript
js事件监听机制(事件捕获)总结
2014/08/08 Javascript
javascript常见操作汇总
2014/09/03 Javascript
js运动动画的八个知识点
2015/03/12 Javascript
简介JavaScript中的getSeconds()方法的使用
2015/06/10 Javascript
javascript 使用for循环时该注意的问题-附问题总结
2015/08/19 Javascript
JavaScript数组方法大全(推荐)
2016/07/05 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
JS中的函数与对象的创建方式
2019/05/12 Javascript
深入剖析Python的爬虫框架Scrapy的结构与运作流程
2016/01/20 Python
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
Python迭代器和生成器定义与用法示例
2018/02/10 Python
python3.6使用pymysql连接Mysql数据库
2018/05/25 Python
Python实现二叉树的常见遍历操作总结【7种方法】
2019/03/06 Python
使用Python正则表达式操作文本数据的方法
2019/05/14 Python
Python的numpy库下的几个小函数的用法(小结)
2019/07/12 Python
Jupyter notebook无法导入第三方模块的解决方式
2020/04/15 Python
Python Pivot table透视表使用方法解析
2020/09/11 Python
Python操作Excel的学习笔记
2021/02/18 Python
手把手教你用纯css3实现轮播图效果实例
2017/05/04 HTML / CSS
购买瑞典当代设计的腕表和太阳眼镜:TRIWA
2016/10/30 全球购物
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
德国排名第一的主题公园门票网站:Attraction Tickets Direct
2019/09/09 全球购物
如何查找和删除数据库中的重复数据
2014/11/05 面试题
关于赌博的检讨书
2014/01/24 职场文书
青岛导游词
2015/02/12 职场文书
员工辞退通知书
2015/04/17 职场文书
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS
springboot实现string转json json里面带数组
2022/06/16 Java/Android