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”，下拉菜单应该只显示 California，因为它只匹配给定的输入字符串。

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 和 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 回答