Angular ng-options track by issue

Question

I have a data set of objects that I'm displaying using ng-options. I'm binding the objects ID value to the value using track by

Currently, the data values are being included but they're being displayed with commas. For example...

$scope.items = [
   {ID: '2012', Title: 'Chicago'},
   {ID: '2013', Title: 'New York'},
   {ID: '2014', Title: 'Washington'},
];

<select ng-options="item.Title for item in items track by item.ID">
</select>

But this will render...

<option value="2,0,1,2" label="Chicago">Chicago</option>
<option value="2,0,1,3" label="New York">New York</option>

Why are these commas being added, and how can I remove them?

score 9 · Answer 1 · answered Jul 01 '15 at 13:51

9

You don't need track by:

<select ng-options="i.ID as i.Title for i in items" ng-model="someModel"></select>

After rendering you will have:

<option value="2012">Chicago</option>
<option value="2013">New York</option>

answered Jul 01 '15 at 13:51

Tomislav

3,181
17
20

2

I noticed that 'select as' and 'track by' do work if trak by tracks an object, while it does not work if we track an attribute (i.e. 'track by obj.value' ) – zontar Dec 01 '15 at 19:10

score 1 · Answer 2 · edited May 23 '17 at 11:45

1

You want:

<select ng-options="obj.ID as obj.title for obj in items"></select>

Track by just helps angular internally with array sorting. See: stack overflow answer

edited May 23 '17 at 11:45

Community

1
1

answered Jul 01 '15 at 13:48

trees_are_great

3,881
3
31
62

manzapanza · Answer 3 · 2015-07-01T14:15:28.897

1

Try this:

<select ng-model="selectedItemID" ng-options="item.ID as item.Title for item in items">
</select>

Selected ID: {{selectedItemID}}

edited Jul 01 '15 at 14:15

answered Jul 01 '15 at 13:48

manzapanza

6,087
4
39
48

This does not add the ID, it just indexes the option values (e.g. 1, 2, 3) – Kyle Jul 01 '15 at 14:13
It adds the ID in the value= part without commas. Several identical answers posted. You can try the same out as a plunkr in JQueryKing's answer. – trees_are_great Jul 01 '15 at 14:20

score 1 · Answer 4 · answered Jul 01 '15 at 13:52

Your way

<select ng-options="item.ID as item.Title for item in items" ng-model="someModel"></select>

Fiddle

Alternate way

<select ng-model="selectedItem">
        <option ng-repeat="item in items" value="{{item.ID}}">{{item.Title}}</option>
</select>

Fiddle2

Shekhar Khairnar · Answer 5 · 2015-07-01T14:17:33.990

function MyController($scope){
  $scope.items = [
                  {ID: '2012', Title: 'Chicago'},
                  {ID: '2013', Title: 'New York'},
                  {ID: '2014', Title: 'Washington'},
               ];
  };

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body ng-controller="MyController">  
  <select ng-model="selectedItem" ng-options="item.ID as item.Title for item in items track by item.ID"></select>
  <br/>{{selectedItem}}
  </body>
  </html>

Following should work:--

  <select ng-model="selectedItem" ng-options="item.ID as item.Title for item in items track by item.ID"></select>

  {{selectedItem}}

The select box does not change even if the value does, this is an Angular problem — ericjam, Apr 10 '16 at 04:11

score 0 · Answer 6 · answered Jul 12 '17 at 11:48

0

If you want it to be by id then you should use

item.id as item.name for item in items

answered Jul 12 '17 at 11:48

Maverick

626
6
11

Angular ng-options track by issue

6 Answers6

Linked