Wählen Sie die Namen der ng-options-Gruppen werden nicht aktualisiert | Dynamische ng-Optionen Gruppen

Question

Ich habe eine Dropdown-Auswahl mit gruppierten ng-Optionen. Der Benutzer sollte in der Lage sein, die Benennung des Gruppennamens in einem Eingabefeld dynamisch zu ändern. Bei Änderung des Gruppennamens wird die Select-Anweisung nicht aktualisiert, es sei denn, Sie treffen eine neue Auswahl.

Jeder hatte das gleiche Problem?

Hier ist der jsbin:http://jsbin.com/ziyeduzalo/edit?html,js,output

Dies ist, wie mein Code aussieht: Js

$scope.players = [ 
    {name: 'Gene', team: 'alpha'}, 
    {name: 'George', team: 'beta'}, 

]; 


$scope.change = function() { 
    $scope.players[0].team = 'new-group-name'; 
}; 

.html

<select ng-options="player.name group by player.team for player in players " ng-model="systemType.tertiaryEquipment"></select> 

UPDATE: Diese scheinen in ... Arbeiten ältere Versionen von angular dann 1.4.x.

Answer 1

Hier habe ich eine Kopie Ihres js bin bearbeitet. Im Grunde habe ich angularJS angewiesen, den Select-Input neu zu kompilieren, damit er sich ändert.

Dies ist innerhalb einer Steuerung, die eine BAD PRACTICE ist, erstellen Sie eine benutzerdefinierte Anweisung, um solche Manipulationen zu tun. Und Gebrauch zur Verfügung gestellt element Variable für die Auswahl DOM-Element select statt document.querySelector()

http://jsbin.com/miyecireba/1/edit?html,js,output

Answer 2

Für andere, die für dieses Problem, die Auflösung für dieses spezielle Problem kommen kann, wenn die Spur zu verwenden, indem.

Track von sollte verwendet werden, um die Optionen als einzigartig in der select zu identifizieren, so sollte es verschiedene Ansatz auf, wenn dies die echte Lösung für diese ist.

Seit ng-optionsgroup by wird optgroups erzeugen wir verwenden, dass in Vorteil, so können wir die track by auf das Objekt der group by verwenden. Die Opt-Gruppen werden auf dem Display des select eindeutig sein.

Also in diesem Fall:

<select ng-options="player.name group by player.team for player in players track by player.team" ng-model="systemType.tertiaryEquipment"></select> 

jsfiddle

Hinweis: Angular Version 1.4.9 verwendet, um dies zu testen.