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脚本的性能的几个注意事项
Dec 22 Javascript
jQuery 定时局部刷新(setInterval)
Nov 19 Javascript
Javascript学习笔记 delete运算符
Sep 13 Javascript
VBS通过WMI监视注册表变动的代码
Oct 27 Javascript
一个简单的js树形菜单
Dec 09 Javascript
js读写(删除)Cookie实例详解
Apr 17 Javascript
jQuery之尺寸调整组件的深入解析
Jun 19 Javascript
angular.bind使用心得
Oct 26 Javascript
JavaScript中循环遍历Array与Map的方法小结
Mar 12 Javascript
详解vue2路由vue-router配置(懒加载)
Apr 08 Javascript
bmob js-sdk 在vue中的使用教程
Jan 21 Javascript
微信小程序使用wxParse解析html的实现示例
Aug 30 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
header()函数使用说明
2006/11/23 PHP
PHP与SQL注入攻击防范小技巧
2011/09/16 PHP
再推荐十款免费的php开发工具
2015/11/09 PHP
thinkPHP框架对接支付宝即时到账接口回调操作示例
2016/11/14 PHP
PHP+iframe图片上传实现即时刷新效果
2016/11/18 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
2010/09/01 Javascript
Extjs4 GridPanel 的几种样式使用介绍
2013/04/18 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
js密码强度校验
2015/11/10 Javascript
BootStrap的table表头固定tbody滚动的实例代码
2016/08/24 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
2017/07/14 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
2017/11/28 Javascript
javascript按顺序加载运行js方法
2017/12/01 Javascript
JS原生瀑布流效果实现
2019/04/26 Javascript
用Vue.js在浏览器中实现裁剪图像功能
2019/06/18 Javascript
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
python正则表达式中的括号匹配问题
2014/12/14 Python
python3.5+tesseract+adb实现西瓜视频或头脑王者辅助答题
2018/01/17 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
Python3 itchat实现微信定时发送群消息的实例代码
2019/07/12 Python
基于python实现百度语音识别和图灵对话
2020/11/02 Python
静态变量和实例变量的区别
2015/07/07 面试题
日语专业毕业生求职信
2013/12/04 职场文书
房地产销售经理岗位职责
2014/01/01 职场文书
小学生家长寄语
2014/04/02 职场文书
爱国主义教育活动总结
2014/05/07 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
2014年领导班子工作总结
2014/12/11 职场文书
党员转正党支部意见
2015/06/02 职场文书
锦旗赠语
2015/06/23 职场文书
position:sticky 粘性定位的几种巧妙应用详解
2021/04/24 HTML / CSS
变长双向rnn的正确使用姿势教学
2021/05/31 Python