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中没有对应的值: 一.直 ...
随机推荐
- ASP.NET之.NET FrameWork框架
.NET FrameWork框架 是一套应用程序开发框架,主要目的提供一个开发模型. 主要的两个组件: 公共语言运行时(Common Language Runtime)(CLR): 提供内存管理.线 ...
- 《Think in UML》读后感
- redis的主从复制与哨兵
主从复制的关键字是slaveof,有三种方法可以让一个redis数据库变成另一个redis数据库的从数据库: 1.修改redis的配置文件,添加#slaveof <masterip> &l ...
- 第一次点击button, view视图出现;第二次点击button,view视图消失
主要思想:点击一下按钮选中Yes,View出现,再点击一下选中为No view消失
- ffmpeg 录屏 screen capture recorder
ffmpeg在Linux下用X11grab进行屏幕录像,在Windows下用DirectShow滤镜 首先需要安装一个软件,screen capture recorder 编译好的下载地址是: htt ...
- php 获取地址栏参数
javascript实现: top.location.href 顶级窗口的地址this.location.href 当前窗口的地址 PHP实现: //获取域名或主机地址 echo $_SERVER[' ...
- Linux查询系统配置常用命令
系统 # uname -a # 查看内核/操作系统/CPU信息# head -n 1 /etc/issue # 查看操作系统版本# cat /proc/cpuinfo ...
- KVM 基本硬件容量扩容
在工作当中如果虚拟机的容量不够使用 如何添加呢? CPU添加 cpu添加有两种方式: 1 创建虚拟机的时候可以添加 # virt-install --help | grep cpu --vcpus=V ...
- java.sql.ResultSet技术(从数据库查询出的结果集里取列值)
里面有一个方法可以在查询的结果集里取出列值,同理,存储过程执行之后返回的结果集也是可以取到的. 如图: 然后再运用 java.util.Hashtable 技术.把取到的值放入(K,V)的V键值里,K ...
- WPF中CheckBox三种状态打勾打叉和滑动效果
本文分为两个demo, 第一个demo实现checkBox的打叉或打勾的效果: 第二个demo部分实现checkBox的滑动效果. Demo1: wpf的CheckBox支持三种状态,但是美中不足的是 ...