CODEWITHSUNDEEP
angularjs
Jesus is Lord
Jesus is Lord

Reputation: 15409

Why doesn't this track by work in AngularJS (Angular 1.X)?

I am setting the ng-model to a value in the controller.

I expect the dropdown to sync (two-way bind?) to the value in the controller.

function TodoCtrl($scope) {
  $scope.model = 'b'
  $scope.model2 = 'b'
  $scope.items = [{
    'n': 'a'
  }, {
    'n': 'b'
  }]
}
.done-true {
  text-decoration: line-through;
  color: grey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js"></script>
<div ng-app>
  <div ng-controller="TodoCtrl">
    <select ng-model="model" ng-options="f.n as f.n for f in items"></select>
    <select ng-model="model2" ng-options="f.n as f.n for f in items track by f.n"></select>
  </div>
</div>

This works:

<select ng-model="model" ng-options="f.n as f.n for f in items"></select>

This does not:

<select ng-model="model2" ng-options="f.n as f.n for f in items track by f.n"></select>

The track by seems to be the problem.

What do I have to do to get track by to work?

Upvotes: 1

Views: 46

Answers (2)

Victor &#214;hrstr&#246;m
Victor &#214;hrstr&#246;m

Reputation: 238

The model doesn't contain the variable "n" that you're trying to track. Change it to $scope.model2 = { n: 'b' }.

Upvotes: 1

Maxim Shoustin
Maxim Shoustin

Reputation: 77920

Well, it is pretty tricky ng-options with track by.

However, if you define a model not as string:

$scope.model = 'b'
$scope.model2 = 'b'

but as object:

$scope.model = {'n': 'b'};
$scope.model2 = {'n': 'b'};

it can work but with some changes, notice ng-model="model.n":

<select ng-model="model.n" 
  ng-options="f.n as f.n for f in items">
</select>


<select ng-model="model2" 
  ng-options="f as f.n for f in items track by f.n">
</select>

Demo plunker

Upvotes: 1

Related Questions