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

在線演示