angular实现select的ng-options
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的更多相关文章
- JS对select动态添加options操作[IE&FireFox兼容]
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
- angular实现select的ng-options4
ng实现简单的select <div ng-controller="ngSelect"> <select ng-model="vm.selectVal& ...
- angular使用select时要注意的坑
一.错误使用产生的坑--留白 公司前段时间要搞一个后台系统,为了快选了angular,在使用select标签的时候碰到一个小问题,首先我们先来看坑图,如图1所示. 如图所示,出现了留白,也就是当我们使 ...
- JS对select动态添加options操作(主流浏览器兼容)
之前项目中,遇到一个表单提交的页面,里面有多级下拉框联动的复杂逻辑,因此当时在做的过程中也是学到了不少容易出现问题的地方,下面就整理下当时遇到的一些关于下拉框的操作,并指出其中的一些注意点和坑: 有如 ...
- Angular笔记-select
--select-- 设置默认选中值方法: <select ng-model="url" ng-options="x.url as x.site for x in ...
- 【转】javascript操作Select标记中options集合
先来看看options集合的这几个方法:options.add(option)方法向集合里添加一项option对象:options.remove(index)方法移除options集合中的指定项:op ...
- [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 ...
- 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& ...
- angular关于select的留白问题
Angular select留白的问题 小白的总结,大神勿喷:需要转载请说明出处,如果有什么问题,欢迎留言 总结:出现留白说明你的ng-model的值在option的value中没有对应的值: 一.直 ...
随机推荐
- php精度计算问题
如果用php的+-*/计算浮点数的时候,可能会遇到一些计算结果错误的问题,比如echo intval( 0.58*100 );会打印57,而不是58,这个其实是计算机底层二进制无法精确表示浮点数的一个 ...
- Struts2之checkboxlist 设置默认值和结果回显
<s:checkboxlist list="#{'篮球':'篮球','足球':'足球','排球':'排球'}"></s:checkboxlist> 这么定义 ...
- 在自学php的路上不知道怎么走!!
在自学php的路上不知道怎么走!! 真希望有人给我指点一二!!!
- hdu_1253_胜利大逃亡(bfs+剪枝)
题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=1253 题意:三维BFS,不解释 题解:DFS+剪枝会超时,裸BFS会超时,BFS+剪枝才能AC,有点伤 ...
- 让AutoMapper在你的项目里飞一会儿(转)
出处:http://www.cnblogs.com/WeiGe/p/3835523.html 先说说DTO DTO是个什么东东? DTO(Data Transfer Object)就是数据传输对象,说 ...
- JPG、PNG和GIF图片的基本原理及优化方法
一提到图片,我们就不得不从位图开始说起,位图图像(bitmap),也称为点阵图像或绘制图像,是由称作像素(图片元素)的单个点组成的.这些点可以进行不同的排列和染色以构成一副图片.当放大位图时,可以看见 ...
- JSP内置对象--response对象 (addCookie(),setHeader(),sendRedirect())
服务器接收客户端请求:request 服务器对客户端的回应:response javax.servlet.http的接口HttpServletResponse extends ServletRespo ...
- ASP.NET中使用Server.Transfer()方法在页间传值 实例
以下代码在VS2008中测试通过 <%@ Page Language="C#" AutoEventWireup="true" CodeFile=" ...
- drupal错误: Maximum execution time of 240 seconds exceeded
drupal7.5安装完成,导入汉化包时,出现错误: Fatal error: Maximum execution time of 240 seconds exceeded in D:\phpweb\ ...
- [分享]Host文件的原理解释及应用说明
Host文件的原理解释及应用说明 Host文件位置及打开方式: Window系统中有个Hosts文件(没有后缀名), Windows 98系统下该文件在Windows目录,在Windows 2 ...