AngularJS替換複雜選擇指令

Question

我已經實現了一個選擇下拉菜單，用於通過項目列表進行過濾。我正在尋找創建一個指令，將隱藏選擇下拉菜單，並使用相同的選項和保持相同的功能與自定義下拉菜單替換它。

選擇：

<select ng-model="selectedLocation" ng-options="location.title group by location.group for location in locations | orderBy:['-group', 'title'] track by location.title"> 
    <option value="">Location</option> 
</select> 

位置的數組：

[ 
    { 
     title: 'New York', 
     group: 'USA' 
    }, 
    { 
     title: 'California', 
     group: 'USA' 
    }, 
    { 
     title: 'London', 
     group: 'Outside USA' 
    } 
] 

所需的輸出：

<div class="active">Location</div> 
<div class="options"> 
    <span class="optgroup">USA</span> 
    <span class="option">New Jersey</span> 
    <span class="option">New York</span> 
    <span class="optgroup">Outside USA</span> 
    <span class="option">London</span> 
</div> 

// hidden, but value still binding to controller 
<select ng-model="selectedLocation" style="display:none">...</select> 

在搞清楚了這一點任何幫助，將不勝感激！

謝謝！

Answer 1

，我建議你檢查出選擇二插件角...

GitHub庫：https://github.com/angular-ui/ui-select2

演示頁：http://ivaynberg.github.io/select2/select2-latest.html