码迷,mamicode.com
首页 > 其他好文 > 详细

angular实现select的ng-options

时间:2015-08-07 18:56:08      阅读:102      评论:0      收藏:0      [点我收藏+]

标签:

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

标签:

原文地址:http://www.cnblogs.com/leejersey/p/4711331.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!