AngularJS select詳細用法

select 是 AngularJS 預設的一組directive。下面是其官網api doc給出的用法：AngularJS:select

大意是，select中的ngOption可以采用和ngRepeat指令類似的循環結構，其data source可以是array或者是object。針對兩種data source又有衍生的好幾種用法。但是官網的例子實在是太少了。

下面是針對幾個不太容易理解的用法的例子。

先上controller

<!-- lang: js -->
function selectCtrl($scope) { $scope.selected = ''; $scope.model = [{ id: 10001, mainCategory: '男', productName: '水洗T恤', productColor: '白' }, { id: 10002, mainCategory: '女', productName: '圓領短袖', productColor: '黑' }, { id: 10003, mainCategory: '女', productName: '短袖短袖', productColor: '黃' }]; } 

實例一：基本下拉效果

usage: label for value in array

<!-- lang: html --> <select ng-model="selected" ng-options="m.productName for m in model"> <option value="">-- 請選擇 --</option> </select> 

效果:

說明

1. usage中的 value 也就是 ng-options 中的 m，而 m 是數組model的一個元素，它是一個變量
2. usage中的 label 也就是 ng-options 中的m.productName， 其實就是一個 AngularJS Expression

實例二：自定義下拉顯示名稱

usage: label for value in array

<!-- lang: html --> <select ng-model="selected" ng-options="(m.productColor + ' - ' + m.productName) for m in model"> <option value="">-- 請選擇 --</option> </select> 

效果

說明

1. 可以看到，usage 中的 label 可以根據需求拼接出不同的字符串

實例三： 讓選項分組

usage: label group by group for value in array

<!-- lang: html --> <select ng-model="selected" ng-options="(m.productColor + ' - ' + m.productName) group by m.mainCategory for m in model"> <option value="">-- 請選擇 --</option> </select> 

效果

說明

1. 這里使用了group by，通過$scope.model中的mainCategory字段進行分組

實例四：自定義ngModel的值

usage: select as label for value in array

<!-- lang: html --> <select ng-model="selected" ng-options="m.id as m.productName for m in model"> <option value="">-- 請選擇 --</option> </select> 

效果