[AngularJS]ngOptions

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

資料物件

$scope.lunches = [
    {
        name: 'Hamburger',
        side_dish: 'Corn Soup',
        category: 'Food',
        price: 50
    },
    {
        name: 'Rice',
        side_dish: 'Egg',
        category: 'Food',
        price: 80
    },
    {
        name: 'Pork',
        side_dish: 'Black Tea',
        category: 'Food',
        price: 100
    },
    {
        name: 'Shit',
        side_dish: 'Dog',
        category: 'Garbage',
        price: 10
    }
];

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

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

自訂下拉選單

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

自訂 value

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

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

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