admin管理员组

文章数量:1221321

I'm using for the website I'm working on. Currently the code is as follows:

       <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>

When I type anything in the input field, for example "a", ui-select-choices shows all the fields containing "a" (by default). What I want to do is, I want to show all the states starting with "a" only. If nothing is typed in the input box, then show all the fields in alphabetical order. Can someone please propose a solution? I saw few other posts but no one has answered this question yet. Thanks in advance.

Example

Here's an example, suppose states array has states like California, Connecticut, Alaska, Arizona, New York.

If nothing is typed in the input field, dropdown should show Alaska, Arizona, California, Connecticut, New York (which can be achieved using orderBy filter).

If user types "a" in the input field, dropdown should show Alaska, Arizona and no other fields as Alaska and Arizona are only fields starting with "a". If user types "c", dropdown should show California, Connecticut. If user types "ca", dropdown should show California only as it only matches the input string given.

I'm using https://github.com/angular-ui/ui-select for the website I'm working on. Currently the code is as follows:

       <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>

When I type anything in the input field, for example "a", ui-select-choices shows all the fields containing "a" (by default). What I want to do is, I want to show all the states starting with "a" only. If nothing is typed in the input box, then show all the fields in alphabetical order. Can someone please propose a solution? I saw few other posts but no one has answered this question yet. Thanks in advance.

Example

Here's an example, suppose states array has states like California, Connecticut, Alaska, Arizona, New York.

If nothing is typed in the input field, dropdown should show Alaska, Arizona, California, Connecticut, New York (which can be achieved using orderBy filter).

If user types "a" in the input field, dropdown should show Alaska, Arizona and no other fields as Alaska and Arizona are only fields starting with "a". If user types "c", dropdown should show California, Connecticut. If user types "ca", dropdown should show California only as it only matches the input string given.

• javascript
• jquery
• angularjs
• angular-ui
• angular-ui-select

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Aug 17, 2016 at 17:39 SwapSwap 19911 gold badge22 silver badges1414 bronze badges 2

• Use Tony's solution with a custom filter github.com/michaelbromley/angularUtils/blob/master/src/filters/… – KreepN Commented Aug 17, 2016 at 18:04
• Thanks @KreepN. I was able to make it work using startsWith filter. I had one question. Do you know how can I pass text typed in the input field to the filter. I can use jquery selector like $('input.ui-select-search').val() but the problem with it is, I'm using multiple ui-select containers, it works for the first container but doesn't work for other containers. I'd like to pass the value typed in the ui-select container to the startsWith filter. Do you know how can I pass? $select.search won't work. – Swap Commented Aug 17, 2016 at 19:51

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 11

If I understand you correctly, I think all you need to do is add

| orderBy:'Name'

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

Check out orderBy for more information

After digging a little and with Tomy's and KreepN's help, I found the answer. Here it is,

   <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 is as follows:

.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;
        }
    };
});

I tried all the options above but I achieved the result only in this case. It works for me:

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

本文标签： javascriptangularjs uiselectchoices dropdown aphabetical order depending on the input givenStack Overflow