ng-options 是 AngularJS 中快速產生 option 的方法,而且 ng-options 使用上非常靈活,因此在不同狀況下使用方法都會有所差異

資料物件

1$scope.lunches = [
2    {
3        name: 'Hamburger',
4        side_dish: 'Corn Soup',
5        category: 'Food',
6        price: 50
7    },
8    {
9        name: 'Rice',
10        side_dish: 'Egg',
11        category: 'Food',
12        price: 80
13    },
14    {
15        name: 'Pork',
16        side_dish: 'Black Tea',
17        category: 'Food',
18        price: 100
19    },
20    {
21        name: 'Shit',
22        side_dish: 'Dog',
23        category: 'Garbage',
24        price: 10
25    }
26];

1.label for value in array
基本下拉選單

1<!-- 將名稱帶入選單 -->
2<select ng-model="selectLunch" ng-options="lunch.name for lunch in lunches">
3    <option value="">請選擇</option>
4</select>

自訂下拉選單

1<select ng-model="selectLunch" ng-options="(lunch.name + ' (' + lunch.side_dish + ')') for lunch in lunches">
2    <option value="">請選擇</option>
3</select>

自訂 value

1<select ng-model="selectLunch" ng-options="lunch.name for lunch in lunches track by lunch.price">
2    <option value="">請選擇</option>
3</select>
4{{selectLunch}}

2.label group by group for value in array
加入 optgroup 分類

1<!-- 利用 group by 選擇分類 -->
2<select ng-model="selectLunch" ng-options="lunch.name group by lunch.category for lunch in lunches track by lunch.price">
3    <option value="">請選擇</option>
4</select>
5{{selectLunch}}
Categories: AngularJS