CODEWITHSUNDEEP
angularjs
Scotty Bollinger
Scotty Bollinger

Reputation: 2363

Angularjs select not ordering correctly

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.

Upvotes: 1

Views: 222

Answers (3)

Jason Goemaat
Jason Goemaat

Reputation: 29214

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>

Upvotes: 2

geniuscarrier
geniuscarrier

Reputation: 4249

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/

Upvotes: 2

Nicolas ABRIC
Nicolas ABRIC

Reputation: 4935

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

Upvotes: 2

Related Questions