angular select中ng-options使用
2016-01-13 16:39
429 查看
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。
以后总会用到的!!
相关文章推荐
- willMoveToParentViewController和didMoveToParentViewController
- shell-echo
- Hadoop-简单的MapReduce
- 解决 PermGen space Tomcat内存设置
- SAD算法的OpenCV实现
- Tomcat 发布web项目
- CentOS 7 x86_64 编译安装zabbix-2.4.2出错 MySQL library not found
- shell 循环
- xargs命令作用以及参数详情
- 滴滴打的架构
- eclipse:不能在tomcat里添加一个项目的解决方法
- NanoPC-T1串口调试
- Nginx禁止指定user_agent
- sed使用实例
- Java常用FTP文件操作说明 Apache.FTPClient,ftp4j,jftp
- linux下lvs搭建负载均衡集群
- Linux Platform驱动程序框架解析
- Linux下防火墙iptables用法规则详解
- linux下lvs搭建负载均衡集群
- Docker容器内外互相拷贝文件