4

私が取り組んでいるウェブサイトには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」で始まるすべての州のみを表示したいということです。入力ボックスに何も入力されていない場合は、すべてのフィールドをアルファベット順に表示します。誰かが解決策を提案できますか? 他の投稿はほとんど見ませんでしたが、この質問にはまだ誰も答えていません。前もって感謝します。

例

以下に例を示します。states 配列にカリフォルニア、コネチカット、アラスカ、アリゾナ、ニューヨークなどの州があるとします。

入力フィールドに何も入力されていない場合、ドロップダウンにはアラスカ、アリゾナ、カリフォルニア、コネチカット、ニューヨークが表示されます (これは orderBy フィルターを使用して実現できます)。

ユーザーが入力フィールドに「a」と入力すると、アラスカとアリゾナは「a」で始まるフィールドのみであるため、ドロップダウンにはアラスカ、アリゾナが表示され、他のフィールドは表示されません。ユーザーが「c」と入力すると、ドロップダウンにカリフォルニア、コネチカットが表示されます。ユーザーが「ca」と入力すると、指定された入力文字列にのみ一致するため、ドロップダウンにはカリフォルニアのみが表示されます。

4

3 に答える 3

11

私があなたを正しく理解しているなら、あなたがする必要があるのは追加するだけだと思います

| | orderBy:'名前'

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

詳しくは orderByをご覧ください

于 2016-08-17T17:49:43.137 に答える
3

少し掘り下げて、Tomy's と 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('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;
        }
    };
});
于 2016-08-18T01:16:02.200 に答える
2

上記のすべてのオプションを試しましたが、この場合にのみ結果が得られました。わたしにはできる：

<ui-select-choices repeat="group in groups | filter: $select.search | orderBy:['name']">
  {{ group.name }}
</ui-select-choices>
于 2019-01-24T08:58:30.350 に答える