您的位置:首页 > 运维架构

angular实现select的ng-options4

2016-05-10 10:01 106 查看
ng实现简单的select

<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);
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: