Angularjs select not ordering correctly

Question

I'm trying to get a select dropdown to order some teams by their team name. It appears to work partially but cannot seem to get the teams to display in order. Would really like to have "All Teams" at the top but I don't know how feasible that is.

Here is the code:

HTML

<div ng-app>
<div ng-controller="Ctrl">
    <label>Filter by Team:</label>
    <select ng-model="filters.teamIdSelected" ng-options="value.teamId as value.teamName for (key, value) in teams | orderBy: 'teamName'"></select>
</div>

JS

function Ctrl($scope) {
$scope.filters = {};
var teams = [{
    "teamName": "Cubs",
    "teamId": 51
}, {
    "teamName": "Bulldogs",
    "teamId": 68
}, {
    "teamName": "Grizzlies",
    "teamId": 12
}, {
    "teamName": "Tigers",
    "teamId": 71
}, {
    "teamName": "Braves",
    "teamId": 16
}, {
    "teamName": "Cowboys",
    "teamId": 24
}, {
    "teamName": "Monsters",
    "teamId": 70
}, {
    "teamName": "Brats",
    "teamId": 23
}, {
    "teamName": "Chumps",
    "teamId": 21
}, {
    "teamName": "Dingleberries",
    "teamId": 93
}, {
    "teamName": "Redskins",
    "teamId": 22
}, {
    "teamName": "123Myteam",
    "teamId": 47
}, {
    "teamName": "Gophers",
    "teamId": 87
}, {
    "teamName": "Peanuts",
    "teamId": 77
}, {
    "teamName": "Bloopers",
    "teamId": 79
}, {
    "teamName": "Losers",
    "teamId": 88
}, {
    "teamName": "Marlins",
    "teamId": 84
}, {
    "teamName": "Ear Muffs",
    "teamId": 75
}, {
    "teamName": "Pizzas",
    "teamId": 78
}, {
    "teamName": "Weiners",
    "teamId": 74
}, {
    "teamName": "Bills",
    "teamId": 86
}];
teams.unshift({
    teamId: 0,
    teamName: 'All Teams'
});
$scope.teams = teams;

$scope.filters.teamIdSelected = 0; }

Here is a fiddle to demonstrate.

Thanks in advance.

Jason Goemaat · Accepted Answer · 2013-10-10 21:25:02Z

2

Your for (key, value) in teams is undoing the ordering for one, I think it is meant to iterate over object properties and you just have an array. You can replace it with for value in teams:

ng-options="value.teamId as value.teamName for value in teams | orderBy: 'teamName'

Nicolas's option is good, but here are a couple of more ways. First you could put a space in front of 'All Teams' which will cause it to be sorted first (fiddle):

teams.unshift({
    teamId: 0,
    teamName: ' All Teams'
});

Second you could create a function to customize the sorting. This one just adds a 'Z' in front of other names for sorting purposes (fiddle):

$scope.sortName = function(team) {
  if (team.teamName == 'All Teams')
    return team.teamName;
    return 'Z' + team.teamName;
};

-html-

<select ng-model="filters.teamIdSelected"
    ng-options="value.teamId as value.teamName for value in teams | orderBy:sortName"
>
</select>

edited Oct 10, 2013 at 21:25

answered Oct 8, 2013 at 18:01

Jason Goemaat

29.3k15 gold badges89 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Scotty Bollinger Over a year ago

Thanks for responding. In both the fiddles, the items are still not correctly sorted. Going with Nicolas's answer

Jason Goemaat Over a year ago

Sorry, missed that. I updated the fiddles and edited my answer so the problem is addressed at the top.

Nicolas ABRIC · Accepted Answer · 2013-10-08 17:48:26Z

2

Unfortunately when comparing/sorting Strings in Javascript (what orderBy do) every String that will start with a numeric characters will be before any other Strings. That's why I would suggest that you change a little bit the way your select is generated and do something like :

<div ng-controller="Ctrl">
  <label>Filter by Team:</label>
  <select ng-model="filters.teamIdSelected">
    <option value="0">All Teams</option>
    <option ng-repeat="team in teams | orderBy: 'teamName'" value="{{team.teamId}}">{{team.teamName}}</option>
  </select>
</div>

See a working Fiddle here

answered Oct 8, 2013 at 17:48

Nicolas ABRIC

4,93531 silver badges18 bronze badges

1 Comment

geniuscarrier Over a year ago

I would not prefer to use ng-repeat for dropdown box.

geniuscarrier · Accepted Answer · 2013-10-08 17:53:51Z

2

This is what you need:

<div ng-app>
  <div ng-controller="Ctrl">
        <label>Filter by Team:</label>
        <select
        ng-model="filters.teamIdSelected"
        ng-options="team.teamName for team in teams | orderBy: 'teamName'"
      ><option value="">All Teams</option></select>
    </div>
  </div>

Demo: http://jsfiddle.net/W7UwF/3/

answered Oct 8, 2013 at 17:53

geniuscarrier

4,2492 gold badges24 silver badges15 bronze badges

2 Comments

Scotty Bollinger Over a year ago

Thanks for the response. While this technically solves the issue, it also creates another that was solved before. When you add your code, the value in the select is changed to the index, not the teamId, which I need to pass to the server. So for instance, "Cubs" should be 51 but 9 is what will be passed.

geniuscarrier Over a year ago

@ScottyBollinger In this case, ng-change will help you solve the problem. Check this out: jsfiddle.net/W7UwF/4

Collectives™ on Stack Overflow

Angularjs select not ordering correctly

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related