angular实现select的ng-options4
2016-05-10 10:01
106 查看
ng实现简单的select
给ng-options自定义option的value值
添加了id属性作为option的value
你可能会在页面视图看到option生成的value为0,1,2,3,是因为angular会自动添加索引为value的值
让我们来个ng-change事件监控来看看
<div ng-controller="ngSelect"> <select ng-model="vm.selectVal" ng-options="o.title for o in vm.optionsData"> <option value="">请选择</option> </select> </div>
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
- Window_Open详解
- 什么是架构?有几人说的清楚
- centos下安装git
- 大型网站技术架构 读书笔记3 高性能架构
- 大型网站技术架构 读书笔记3 高性能架构
- tomcat 服务器Linux环境搭建
- IDEA远程调试Tomcat
- Nginx(PHP/fastcgi)的PATH_INFO问题
- (原)linux下利用cmake来编译jthread开源库
- 网站高可用架构--一
- linux中,ps命令和top命令的区别
- centos 6.5常见lib库安装
- linux top 命令
- Nginx 502gateway错误故障解决
- Linux 统计某个字符串出现的次数
- 认知计算与区块链技术变革金融IT架构
- 01.linux系统vi常规配置
- 开普勒架构和麦克斯韦架构是什么?有什么区别?
- debstack 安装 openstack