ng-options Direktive wird nicht aktualisiert

Question

Ich habe eine <select> Box, die ich mit einigen Objekten bevölkere. Ich gruppiere sie, in diesem Beispiel von Team, mit group by. Wenn sich jedoch ein Spielerteam ändert, wird die Gruppe nicht aktualisiert.

Dies ist das Markup:

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

Und der 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 ein mein Problem JSFiddle demonstriert.

Warum wird der Teamname nicht aktualisiert, wenn er geändert wird?

Answer 1

bitte im Bereich „Komplexe Modelle (Objekte oder Sammlungen)“ in https://docs.angularjs.org/api/ng/directive/ngOptions

AngularJS nur das Objekt mit Referenzspuren, wenn weder „Track von“ gegeben wird oder der „mehr“ Flag gesetzt.

Sie haben ein paar Optionen:

leicht gefallen wäre „Spur hinzufügen, indem Sie (player.name + '|' + player.team), aber das ist ein wenig hackish

Or. Andernfalls erstellen Sie in Ihrer Änderungsmethode ein neues Objekt: $ scope.players [0] = {name: $ scope.players [0] .name, team: "Sweden"}