html

<div ng-controller="ngSelect">
<select ng-model="vm.selectVal" ng-options="o.title for o in vm.optionsData">
<option value="">请选择</option>
</select>
</div>

js

var app = angular.module("app",[]);
app.controller("ngSelect",function($scope){ var vm = $scope.vm = {}; //数组对象用来给ng-options遍历
vm.optionsData = [{
title : "angularJs"
},{
title : "emberJs"
},{
title : "backboneJs"
},{
title : "knockoutJs"
}]; })

给ng-options自定义option的value值

<select ng-model="vm.selectVal" ng-options="o.id as o.title for o in vm.optionsData" ng-change="selectChange()">
<option value="">请选择</option>
</select>

添加了id属性作为option的value
你可能会在页面视图看到option生成的value为0,1,2,3,是因为angular会自动添加索引为value的值
让我们来个ng-change事件监控来看看

vm.optionsData = [{
id : 4543,
title : "angularJs"
},{
id : 546,
title : "emberJs"
},{
id : 456,
title : "backboneJs"
},{
id : 75,
title : "knockoutJs"
}]; $scope.selectChange = function(){
//添加了ng-change事件来试试id值的输出
console.log(vm.selectVal);
}

angular实现select的ng-options的更多相关文章

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

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

  2. angular实现select的ng-options4

    ng实现简单的select <div ng-controller="ngSelect"> <select ng-model="vm.selectVal& ...

  3. angular使用select时要注意的坑

    一.错误使用产生的坑--留白 公司前段时间要搞一个后台系统,为了快选了angular,在使用select标签的时候碰到一个小问题,首先我们先来看坑图,如图1所示. 如图所示,出现了留白,也就是当我们使 ...

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

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

  5. Angular笔记-select

    --select-- 设置默认选中值方法: <select ng-model="url" ng-options="x.url as x.site for x in ...

  6. 【转】javascript操作Select标记中options集合

    先来看看options集合的这几个方法:options.add(option)方法向集合里添加一项option对象:options.remove(index)方法移除options集合中的指定项:op ...

  7. [Angular] The Select DOM Event and Enabling Text Copy

    When we "Tab" into a input field, we want to select all the content, if we start typing, i ...

  8. angular报错:angular.min.js:118Error: [ng:areq] http://errors.angularjs.org/1.5.8/ng/areq

    报错代码如下: <div ng-controller="HelloAngular"> <p>{{greeting.text}},angular</p& ...

  9. angular关于select的留白问题

    Angular select留白的问题 小白的总结,大神勿喷:需要转载请说明出处,如果有什么问题,欢迎留言 总结:出现留白说明你的ng-model的值在option的value中没有对应的值: 一.直 ...

随机推荐

  1. JavaScript(3)—— 正则表达式

    ---恢复内容开始--- 正则表达式 这是写的正则表达式,正则表达式的点比较多,也比较细.所以有些地方我们得注意的比较多.正则表达式在JS中是很重要的一个部分,其中他的语法都得牢记.不过最好还是理解性 ...

  2. Robot Framework开发系统关键字详细

    本文的目的,是记录如何在rf下,开发属于自己的库函数(又称之系统关键字) 1.首先在..\Python27\Lib\site-packages目录下创建自定义库目录如Verification_Libr ...

  3. linux脚本Shell之awk详解(二)

    三.printf的使用   print format 生成报表 %d        十进制有符号整数 %u        十进制无符号整数 %f        浮点数 %s        字符串 %c ...

  4. MC 在1分钟图拿出5分钟,15分钟,30分钟,1小时的K线

    using System; using System.Drawing; using System.Linq; using System.Collections; namespace PowerLang ...

  5. 括号匹配(C++ Stack)

    最近在学习C++,所以使用stack容器来实现括号匹配 /**********************************************************/ stack<Ty ...

  6. Bank Interest

    Bank Interest Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 131072/65536K (Java/Other) Tota ...

  7. flash Ane

    1.ANE简介 Adobe AIR Native Extension,Adobe AIR的本地扩展,简称ANE.什么叫本地扩展?因为Adobe AIR是跨平台的一个运行时,可以在Windows,Mac ...

  8. 关于Adobe CC 系列软件反复弹出 Adobe 软件许可问题

    最近装了falsh cc2014 版本,并结合网络提供资源破解(可参考:http://www.cnblogs.com/-yan/p/4450196.html) 但是,使用超过二十四小时后(时间为估计值 ...

  9. Ansible3:ansible.cfg配置说明【转】

    Ansible默认安装好后有一个配置文件/etc/ansible/ansible.cfg,该配置文件中定义了ansible的主机的默认配置部分,如默认是否需要输入密码.是否开启sudo认证.actio ...

  10. perl-cgi基础

    来源: http://www.cnblogs.com/itech/archive/2012/09/22/2698553.html 代码: http://xxxxx/cgi/perl-cgi.cgi?n ...