angular实现select的ng-options

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);
}

在线演示