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. php精度计算问题

    如果用php的+-*/计算浮点数的时候,可能会遇到一些计算结果错误的问题,比如echo intval( 0.58*100 );会打印57,而不是58,这个其实是计算机底层二进制无法精确表示浮点数的一个 ...

  2. Struts2之checkboxlist 设置默认值和结果回显

    <s:checkboxlist list="#{'篮球':'篮球','足球':'足球','排球':'排球'}"></s:checkboxlist> 这么定义 ...

  3. 在自学php的路上不知道怎么走!!

    在自学php的路上不知道怎么走!! 真希望有人给我指点一二!!!

  4. hdu_1253_胜利大逃亡(bfs+剪枝)

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=1253 题意:三维BFS,不解释 题解:DFS+剪枝会超时,裸BFS会超时,BFS+剪枝才能AC,有点伤 ...

  5. 让AutoMapper在你的项目里飞一会儿(转)

    出处:http://www.cnblogs.com/WeiGe/p/3835523.html 先说说DTO DTO是个什么东东? DTO(Data Transfer Object)就是数据传输对象,说 ...

  6. JPG、PNG和GIF图片的基本原理及优化方法

    一提到图片,我们就不得不从位图开始说起,位图图像(bitmap),也称为点阵图像或绘制图像,是由称作像素(图片元素)的单个点组成的.这些点可以进行不同的排列和染色以构成一副图片.当放大位图时,可以看见 ...

  7. JSP内置对象--response对象 (addCookie(),setHeader(),sendRedirect())

    服务器接收客户端请求:request 服务器对客户端的回应:response javax.servlet.http的接口HttpServletResponse extends ServletRespo ...

  8. ASP.NET中使用Server.Transfer()方法在页间传值 实例

    以下代码在VS2008中测试通过 <%@ Page Language="C#" AutoEventWireup="true" CodeFile=" ...

  9. drupal错误: Maximum execution time of 240 seconds exceeded

    drupal7.5安装完成,导入汉化包时,出现错误: Fatal error: Maximum execution time of 240 seconds exceeded in D:\phpweb\ ...

  10. [分享]Host文件的原理解释及应用说明

    Host文件的原理解释及应用说明   Host文件位置及打开方式:   Window系统中有个Hosts文件(没有后缀名), Windows 98系统下该文件在Windows目录,在Windows 2 ...