angularjs ui-select-choices下拉aphabetical順序取決於給定的輸入

Question

我正在使用https://github.com/angular-ui/ui-select用於我正在處理的網站。 目前代碼如下：

       <ui-select ng-model="model.states">
         <ui-select-match placeholder="State">
           {{$item.Name}}
         </ui-select-match>
         <ui-select-choices repeat="item.Code as item in statesArray | filter:$select.search">
            {{item.Name}}
         </ui-select-choices>
      </ui-select>

當我在輸入字段中輸入任何內容時，例如“a”，ui-select-choices顯示包含“a”的所有字段（默認情況下）。 我想要做的是，我想顯示所有以“a”開頭的州。 如果輸入框中未輸入任何內容，則按字母順序顯示所有字段。 有人可以提出解決方案嗎？ 我看過其他一些帖子，但還沒有人回答這個問題。 提前致謝。

例

這是一個例子，假設州陣列有加利福尼亞州，康涅狄格州，阿拉斯加州，亞利桑那州，紐約州等州。

如果輸入字段中沒有輸入任何內容，則下拉列表應顯示阿拉斯加州，亞利桑那州，加利福尼亞州，康涅狄格州，紐約州（可以使用orderBy過濾器實現）。

如果用戶在輸入字段中鍵入“a”，則下拉列表應顯示亞利桑那州，亞利桑那州，並且沒有其他字段，因為阿拉斯加州和亞利桑那州只有以“a”開頭的字段。 如果用戶鍵入“c”，則下拉列表應顯示康涅狄格州加利福尼亞州。 如果用戶鍵入“ca”，則下拉列表應僅顯示加利福尼亞，因為它僅匹配給定的輸入字符串。

Answer 1

如果我理解正確，我認為你需要做的就是添加

| 排序依據：“名稱”

<ui-select-choices repeat="item.Code as item in statesArray | filter:$select.search | orderBy:'Name'">
{{item.Name}}
</ui-select-choices>

查看訂單以獲取更多信息

Answer 2

在挖掘了一點並且在Tomy和KreepN的幫助下，我找到了答案。 這里是，

   <ui-select ng-model="model.states">
     <ui-select-match placeholder="State">
       {{$item.Name}}
     </ui-select-match>
     <ui-select-choices repeat="item.Code as item in statesArray | startsWith:$select.search | orderBy:'Code'">
        {{item.Name}}
     </ui-select-choices>
   </ui-select>

startsWith Filter如下：

.filter('startsWith', function() {
    return function(array,search) {
        if(!_.isUndefined(array) && !_.isUndefined(search)) {
            var matches = [];
            for (var i = 0; i < array.length; i++) {
                if (array[i].Name.toUpperCase().indexOf(search.toUpperCase()) === 0 &&
                    search.length <= array[i].Name.length) {
                    matches.push(array[i]);
                }
            }
            return matches;
        }
    };
});

Answer 3

我嘗試了上面的所有選項，但我只在這種情況下實現了結果。 這個對我有用：

<ui-select-choices repeat="group in groups | filter: $select.search | orderBy:['name']">
  {{ group.name }}
</ui-select-choices>