如何設置組 label 訂購 angularjs ui-select group-by

Question

我正在使用ui-select-choices group-by對 UI select 中的列表進行分組，分組工作正常，但我面臨的問題是組標簽不是按字母順序排列的，下面是代碼片段

HTML：

<div class="col-md-5">
            <ui-select name="template" ng-model="template.data" theme="bootstrap"
              ng-disabled="ctrl.disabled" sortable="true">
              <ui-select-match placeholder="-- Select --">{{$select.selected.name}}</ui-select-match>
              <ui-select-choices group-by="'itemType'"
                repeat="rf in templates | propsFilter: {name: $select.search} | orderBy : 'name' : false">
                <div ng-bind-html="rf.name | highlight: $select.search"></div>
              </ui-select-choices>
            </ui-select>
          </div>

Output：

這個 output 的問題是這些組沒有按字母順序排列，即。 “客戶”應該在“用戶”之前出現任何關於如何實現這一目標的想法。

注意：我已經按項目類型訂購了我的陣列，但 output 沒有變化。

提前致謝。

Answer 1

嘗試group-filter選項：

<ui-select-choices group-by="'itemType'"
                   group-filter="orderFilterFn"
                   repeat="rf in templates | propsFilter: {name: $select.search} | orderBy : 'name' : false">
    <div ng-bind-html="rf.name | highlight: $select.search"></div>
</ui-select-choices>

並使用$filter在 function orderFilterFn中執行排序：

$scope.orderFilterFn= function(groups) {
    return $filter('orderBy')(groups, 'name');
};