angular select中ng-options使用
function selectCtrl($scope) {
$scope.selected = ''; $scope.model = [{
id: 10001,
mainCategory: '男',
productName: '水洗T恤',
productColor: '白'
}, {
id: 10002,
mainCategory: '女',
productName: '圆领短袖',
productColor: '黑'
}, {
id: 10003,
mainCategory: '女',
productName: '短袖短袖',
productColor: '黃'
}]; <select ng-model="selected" ng-options="m.productName for m in model">
<option value="">-- 请选择 --</option>
</select> 从这两段代码就能看出结果了,ng-options的值就可以当做英文意思来理解。m.productName属性来自m in model遍历。按照这种思路下面列出不同使用格式↓ <select ng-model="selected" ng-options="(m.productColor + ' - ' + m.productName) for m in model">
<option value="">-- 请选择 --</option>
</select> 遍历出两个属性值。 <select ng-model="selected" ng-options="(m.productColor + ' - ' + m.productName) group by m.mainCategory for m in model">
<option value="">-- 请选择 --</option>
</select> 通过遍历,进行分组显示。 <select ng-model="selected" ng-options="m.id as m.productName for m in model">
<option value="">-- 请选择 --</option>
</select> 这个比较难理解点,意思是通过遍历得到id,也就是界面显示的是m.productName值但是选中后输入框绑定到ng-model=”selsected”的值是m.id。 以后总会用到的!!
angular select中ng-options使用的更多相关文章
- datatables中的Options总结(3)
datatables中的Options总结(3) 十.ColReorder colReorder.fixedColumnsLeft 不允许x列重新排序(从左数) colReorder.fixedCol ...
- datatables中的Options总结(1)
datatables中的Options总结(1) 最近一直研究dataTables插件,下面是总结的所有的选项内容,用了帮助学习datatables插件. 这些选项的配置在$().Datatable( ...
- AngularJS select中ngOptions用法详解
AngularJS select中ngOptions用法详解 一.用法 ngOption针对不同类型的数据源有不同的用法,主要体现在数组和对象上. 数组: label for value in a ...
- 一个Angular模块中可以声明哪些组件?
一个Angular模块中可以声明哪些组件? (1) controller 控制器 (2) directive 指令 (3) function ...
- JS对select动态添加options操作[IE&FireFox兼容]
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
- JS对select动态添加options操作(主流浏览器兼容)
之前项目中,遇到一个表单提交的页面,里面有多级下拉框联动的复杂逻辑,因此当时在做的过程中也是学到了不少容易出现问题的地方,下面就整理下当时遇到的一些关于下拉框的操作,并指出其中的一些注意点和坑: 有如 ...
- 在 Angular 8 中,我们可以期待些什么
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 本文由葡萄城翻译并发布 --- Angular 作为一款优秀的前端框架,自诞生之日起,就致力于面向前端开发者 ...
- select中option的onclick事件失效
html: <select id="pageSelect"> <option value="1" selected onclick=" ...
- 在angular 6中使用 less
在angular 6中使用 less 新项目 ng new [appname] --style less 已有的项目 修改 *.css 文件及引用处后缀名为 less并在 angular.json 文 ...
随机推荐
- POJ 1201 Intervals (差分约束系统)
题意 在区间[0,50000]上有一些整点,并且满足n个约束条件:在区间[ui, vi]上至少有ci个整点,问区间[0, 50000]上至少要有几个整点. 思路 差分约束求最小值.把不等式都转换为&g ...
- VB6 仿.netWinfrom控件 Anchor属性类
vb6中控件没有anchor与dock属性,窗体变大后原来要在resize中调整控件的move属性,否则就面目全非了.网上找到一些调整控件大小的代码,发现并不太适合自己,于是按照思路自己做了一个类似a ...
- Oracle buffer cache与相关的latch等待事件
buffer cache与相关的latch等待事件 1.buffer cache 2.latch:cache buffers lru chain 3.latch:cache buffers chain ...
- MySQL与Oracle 差异比较之一数据类型
数据类型 编号 ORACLE MYSQL 注释 1 NUMBER int / DECIMAL DECIMAL就是NUMBER(10,2)这样的结构INT就是是NUMBER(10),表示整型:MYSQL ...
- [转]Linux关机命令详解
转自:http://www.jb51.net/os/RedHat/1334.html linux下常用的关机命令有:shutdown.halt.poweroff.init:重启命令有:reboot.下 ...
- 小数点输出精度控制问题 .xml
pre{ line-height:1; color:#9f1d66; background-color:#d2d2d2; font-size:16px;}.sysFunc{color:#5d57ff; ...
- leetcode—sudoku solver
1.题目描述 Write a program to solve a Sudoku puzzle by filling the empty cells. Empty cells are indicate ...
- leetcode—jump game
1.题目描述 Given an array of non-negative integers, you are initially positioned at the first index of t ...
- keystone v2 to v3
http://www.cloudkb.net/how-to-change-keystone-api-v2-v3/
- permission denied部署django 遇到没有python_egg_cache的问题解决
检查/etc/httpd/logs/error_log,看是否有如下错误: [Errno 13] Permission denied: '/var/www/.python-eggs' 这时候需要编辑“ ...