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使用的更多相关文章

  1. datatables中的Options总结(3)

    datatables中的Options总结(3) 十.ColReorder colReorder.fixedColumnsLeft 不允许x列重新排序(从左数) colReorder.fixedCol ...

  2. datatables中的Options总结(1)

    datatables中的Options总结(1) 最近一直研究dataTables插件,下面是总结的所有的选项内容,用了帮助学习datatables插件. 这些选项的配置在$().Datatable( ...

  3. AngularJS select中ngOptions用法详解

    AngularJS select中ngOptions用法详解   一.用法 ngOption针对不同类型的数据源有不同的用法,主要体现在数组和对象上. 数组: label for value in a ...

  4. 一个Angular模块中可以声明哪些组件?

    一个Angular模块中可以声明哪些组件? (1) controller        控制器 (2) directive                指令 (3) function         ...

  5. JS对select动态添加options操作[IE&FireFox兼容]

    <select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...

  6. JS对select动态添加options操作(主流浏览器兼容)

    之前项目中,遇到一个表单提交的页面,里面有多级下拉框联动的复杂逻辑,因此当时在做的过程中也是学到了不少容易出现问题的地方,下面就整理下当时遇到的一些关于下拉框的操作,并指出其中的一些注意点和坑: 有如 ...

  7. 在 Angular 8 中,我们可以期待些什么

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 本文由葡萄城翻译并发布 --- Angular 作为一款优秀的前端框架,自诞生之日起,就致力于面向前端开发者 ...

  8. select中option的onclick事件失效

    html: <select id="pageSelect"> <option value="1" selected onclick=" ...

  9. 在angular 6中使用 less

    在angular 6中使用 less 新项目 ng new [appname] --style less 已有的项目 修改 *.css 文件及引用处后缀名为 less并在 angular.json 文 ...

随机推荐

  1. POJ 1201 Intervals (差分约束系统)

    题意 在区间[0,50000]上有一些整点,并且满足n个约束条件:在区间[ui, vi]上至少有ci个整点,问区间[0, 50000]上至少要有几个整点. 思路 差分约束求最小值.把不等式都转换为&g ...

  2. VB6 仿.netWinfrom控件 Anchor属性类

    vb6中控件没有anchor与dock属性,窗体变大后原来要在resize中调整控件的move属性,否则就面目全非了.网上找到一些调整控件大小的代码,发现并不太适合自己,于是按照思路自己做了一个类似a ...

  3. Oracle buffer cache与相关的latch等待事件

    buffer cache与相关的latch等待事件 1.buffer cache 2.latch:cache buffers lru chain 3.latch:cache buffers chain ...

  4. MySQL与Oracle 差异比较之一数据类型

    数据类型 编号 ORACLE MYSQL 注释 1 NUMBER int / DECIMAL DECIMAL就是NUMBER(10,2)这样的结构INT就是是NUMBER(10),表示整型:MYSQL ...

  5. [转]Linux关机命令详解

    转自:http://www.jb51.net/os/RedHat/1334.html linux下常用的关机命令有:shutdown.halt.poweroff.init:重启命令有:reboot.下 ...

  6. 小数点输出精度控制问题 .xml

    pre{ line-height:1; color:#9f1d66; background-color:#d2d2d2; font-size:16px;}.sysFunc{color:#5d57ff; ...

  7. leetcode—sudoku solver

    1.题目描述 Write a program to solve a Sudoku puzzle by filling the empty cells. Empty cells are indicate ...

  8. leetcode—jump game

    1.题目描述 Given an array of non-negative integers, you are initially positioned at the first index of t ...

  9. keystone v2 to v3

    http://www.cloudkb.net/how-to-change-keystone-api-v2-v3/

  10. permission denied部署django 遇到没有python_egg_cache的问题解决

    检查/etc/httpd/logs/error_log,看是否有如下错误: [Errno 13] Permission denied: '/var/www/.python-eggs' 这时候需要编辑“ ...