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: '黃'
}];

1、基本用法
<select ng-model="selected"
ng-options="m.productName for m in model">
<option value="">-- 请选择 --</option>
</select>
2、拼接属性值,让选项看上去更生动
<select ng-model="selected"
ng-options="(m.productColor + ' - ' + m.productName) for m in model">
<option value="">-- 请选择 --</option>
</select>
3、分组显示选项,更直观
<select ng-model="selected"
ng-options="(m.productColor + ' - ' + m.productName) group by m.mainCategory for m in model">
<option value="">-- 请选择 --</option>
</select>
4、用 as 来定义绑定selected的具体值(前三种绑定的model中的一条记录,这里selected绑定的是id)
<select ng-model="selected"
ng-options="m.id as m.productName for m in model">
<option value="">-- 请选择 --</option>
</select>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,999评论 19 139
  • AngularJS是什么?AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架。首先,它是...
    200813阅读 1,653评论 0 3
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,082评论 0 29
  • SQL SELECT 语句 一、查询SQL SELECT 语法 (1)SELECT 列名称 FROM 表名称 (2...
    有钱且幸福阅读 5,748评论 0 33
  • 芋头是我们常见的一种食物,每年多多少少也会买点吃,不知道它的作用,也就是为了营养均衡。 古代每当稻谷歉收、出现饥荒...
    云中飞雁008阅读 755评论 0 0