Angularjs的ui-select-choices会根据输入的字母顺序下拉

angularjs ui-select-choices dropdown aphabetical order depending on the input given

本文关键字：顺序 ui-select-choices Angularjs 输入      更新时间：2023-09-26

我正在使用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"的所有字段。(默认情况下)。我想做的是，我想展示所有以& & & &开头的状态只有。如果在输入框中没有键入任何内容，则按字母顺序显示所有字段。谁能提出一个解决方案?我看到了一些其他的帖子，但还没有人回答这个问题。提前谢谢。

<标题> 例子

这里有一个例子，假设states数组中有加利福尼亚，康涅狄格，阿拉斯加，亚利桑那，纽约。

如果在输入字段中没有输入任何内容，则下拉框应显示阿拉斯加、亚利桑那、加利福尼亚、康涅狄格、纽约(可以使用orderBy过滤器实现)。

如果用户输入"a"在输入字段中，下拉框应该显示Alaska, Arizona，而不是其他字段，因为Alaska和Arizona只是以"a"开头的字段。如果用户输入&;c&;，下拉框应该显示加利福尼亚州，康涅狄格州。如果用户输入"ca"，下拉菜单应该只显示加州，因为它只匹配给定的输入字符串。

如果我没理解错的话，我认为你所需要做的就是加上

| orderBy:"名字"

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

查看orderBy获取更多信息

经过一番调查，在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;
        }
    };
});

我尝试了上面所有的选项，但我只在这种情况下取得了结果。

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