ng-option小解
ng-option 有数组,对象两种情况,但目前只接触过数组
数组:
label for value in array
分为一般数组和对象数组
一般数组:
<select ng-model="myAddress" ng-options="item for item in address"></select>
$scope.address= ["北京", "天津", "河北"];
发现第一项为空
dom树如下:
解析: 1.当未设置初始值时,初始值及option列表第一项为空,默认第一项被选 2.value等于label
设置初始值方法:
1.$scope.myAddress= $scope.address[0];
注: 初始值必须得是数组中的某一项,否则无效
则变为:
2.新增option
<select ng-model="myAddress" ng-options="item for item in address">
<option value="" disabled="">请选择地址</option>
</select>
(值得一提的是这种方法只能新增一个option,多写的不会出现)
变为:
disable的option会变为不可选的灰色,此种方法应用面更广
对象数组:
<select ng-model="myColor1" ng-options="color.name for color in colors"></select>
$scope.colors = [
{name:'black', shade:'dark'},
{name:'white', shade:'light', notAnOption: true},
{name:'red', shade:'dark'},
{name:'blue', shade:'dark', notAnOption: true},
{name:'yellow', shade:'light', notAnOption: false}];
dom树如下:
解析: 写法与一般数组不同,value为label所属的对象
---------------------------------------------------------------------------------------------------------------------------------------------------------
label group by group for value in array(选项分组)
<select ng-model="myColor2" ng-options="color.name group by color.shade for color in colors"></select>
label 分组依据属性
$scope.colors = [
{name:'black', shade:'dark'},
{name:'white', shade:'light', notAnOption: true},
{name:'red', shade:'dark'},
{name:'blue', shade:'dark', notAnOption: true},
{name:'yellow', shade:'light', notAnOption: false}
];
可见按照shade属性进行了分组
----------------------------------------------------------------------------------------------------------------------------------------------------------
label disable when disable for value in array(将部分option设为disable)
<select ng-model="myColor3" ng-options="color.name disable when color.notAnOption for color in colors"></select>
label disable依据属性
$scope.colors = [
{name:'black', shade:'dark'},
{name:'white', shade:'light', notAnOption: true},
{name:'red', shade:'dark'},
{name:'blue', shade:'dark', notAnOption: true},
{name:'yellow', shade:'light', notAnOption: false}
];
可以看出当notAnOption未false时不可点击
--------------------------------------------------------------------------------------------------------------------------------------------
select as label for value in array(设置value)
<select ng-model="myColor4" ng-options="color.shade as color.name for color in colors"></select>
value label
可见shade成了value,name成了label
-------------------------------------------------------------------------------------------------------------------------------------------------
转载于:https://www.cnblogs.com/yanze/p/6071332.html
ng-option小解相关推荐
- NG客制项目下的I18n国际化标准方案
方案选择 国际化i18n 这个方案是最成熟的,同时也是官方的方案,但是这样一个标准化的方案同时意味着灵活度不够.当需要划分feature module,需要客制化组件的时候,这个方案的实施的成本就 ...
- uwsgi: invalid option -- 'x'
安装:pip install uwsgi 启动:uwsgi -x 'uwsgi.xml' 报错:uwsgi: invalid option -- 'x' 原因:centos下,在没有安装libxml2 ...
- ng new ng-pro 报错(创建angular6项目报错)
1.安装nodejs D:\develop\nodejs 2.配置node npm环境变量,npm本地仓库指向自定义目录 原npm仓库位置C:\Users\Administrator\AppData ...
- 【转】jQuery获取Select option 选择的Text和Value
获取一组radio被选中项的值:var item = $('input[name=items][checked]').val(); 获取select被选中项的文本:var item = $(" ...
- html选择按钮selected,HTML Option defaultSelected用法及代码示例
DOM选项defaultSelected属性用于返回所选属性的默认值. HTML中的selected属性用于指定页面加载时默认应选择的选项.这是一个布尔属性.默认情况下,将显示具有所选属性的选项. 用 ...
- ng命令汇总:Angular CLI 使用教程指南参考
Angular CLI 使用教程指南参考 Angular CLI 现在虽然可以正常使用但仍然处于测试阶段. Angular CLI 依赖 Node 4 和 NPM 3 或更高版本. 安装 要安装Ang ...
- angular蚂蚁_Angular 中后台前端解决方案 - Ng Alain 介绍
背景 之前项目使用过vue.js+iview,习惯了后端开发的我,总觉得使用不习惯,之前分析易企秀前端代码,接触到了angular js,完备的相关功能,类似后端开发的体验,让人耳目一新,全新的ang ...
- for循环动态的给select标签添加option内容
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. html <select class="form-control selectpicker&q ...
- with admin option /with grant option
1. with admin option是用在系统权限上的,with grant option是用在对象权限上的. SQL> grant create synonym to scott with ...
- no argument specified with option /LIBPATH:错误的解决
作者:朱金灿 来源:http://blog.csdn.net/clever101 下午使用VS2005编译工程碰到一个链接错误:no argument specified with option &q ...
最新文章
- 常见Jvm面试题总结及答案整理 120道(持续更新)
- python网络编程-异常处理-异常捕获-抛出异常-断言-自定义异常-UDP通信-socketserver模块应用-03
- 解决ubuntu上ifconfig没有eth0/ens33且无法上网的问题
- Android MediaRecorder架构详解
- Bootstrap常用类
- 【工业控制】什么是波形
- 响应式开发中合理选定CSS媒体查询分割点
- html保存table并刷新,js操作 添加删除table行,并进行刷新
- HTML基本功之文档结构
- iPhone 12或于7月开始量产,售价4615元起
- 中国天然饮料市场趋势报告、技术动态创新及市场预测
- springboot2 - 坑 - 解决put提交接收不到参数的问题
- js 自带的 map() 方法
- 残差灰色模型matlab,数学建模+灰色预测模型+MATLAB详解.doc
- win7用ip查找网络计算机,win7通过ip地址查找计算机名的两种方法(图文教程)
- HDC1080温湿度驱动 IIC I2C STM32
- 把Android API文档的颜色改成不易疲劳的绿豆沙颜色
- vscode常用插件 - Path Autocomplete
- win7系统笔记本做无线路由器
- JDK Tomcat MySQL一键安装
热门文章
- python 7-24 sdut-array2-2-局部峰值 (10 分)
- python创建person类用printinfo方法_python基础练习题7
- php 简单的socket,【技术产品】PHP如何实现简单的Socket
- 高级点的php书,深入理解php:高级技巧、面向对象与核心技术(原书第3版) 中文pdf扫描版[76MB]...
- python3一爬虫库url_python3爬虫之Urllib库(一)
- dnn神经网络_【李宏毅机器学习笔记】深度神经网络(DNN)
- 一点一滴岗位测试答案_心理测试:凭直觉,选你最喜欢的一件睡衣,测你的野心是什么级别...
- 华为matebook和linux版本区别,华为MateBook14Linux版本开箱评测 | 从来没有让我们失望!...
- 驱动中定时器,taskle,工作队列编程
- java代码中发送http请求的DnsResolver使用问题