CODEWITHSUNDEEP
angularjs
Patrick Reck
Patrick Reck

Reputation: 339

ng-options directive not being updated

I have a <select> box which I am populating with some objects. I group them, in this example by Team, using group by. However, when a players team change, the group is not updated.

This is the markup: 

<select ng-options="player.name group by player.team for player in players"></select>
<button ng-click="change();">Change team name</button>

And the controller:

  .controller('MainController', function($scope) {
    $scope.players = [{
        name: 'Player one',
        team: 'Denmark'
      },
      {
         name: 'Player two',
        team: 'Denmark'
      },
      {
        name: 'Player three',
        team: 'England'
      },
      {
        name: 'Player four',
        team: 'England'
      },
      {
        name: 'Player five',
        team: 'England'
      }
    ];

    $scope.change = function() {
      $scope.players[0].team = 'Sweden';
    };

Here's a JSFiddle demonstrating my problem.

Why is the team name not updating when changed?

Upvotes: 1

Views: 23

Answers (1)

eekboom
eekboom

Reputation: 5802

Please see the section "Complex Models (objects or collections)" in https://docs.angularjs.org/api/ng/directive/ngOptions

AngularJS only tracks the object by reference if neither "track by" is given or the "multiple" flag is set.

You have a couple of options:

An easy one would be to add "track by (player.name + '|' + player.team) but that is a little hackish.

Or else in your change method create a new object: $scope.players[0] = { name: $scope.players[0].name, team: "Sweden" }

Upvotes: 1

Related Questions