CODEWITHSUNDEEP
angularjshtml-selectng-optionsangularjs-ng-options
ccostel
ccostel

Reputation: 117

ng-option track by group name breaks the select

I have a dropdown select with grouped ng-options. The user should be able to dynamically change the naming of the group name in an input field. On change of the group name value the select directive is not being updated unless you make a new selection.

I fixed this with using track by group name, but now the select dropdown is broken. Note that the option you select is not the one that is actually selected.

Is there a way to have both dynamically updated group name and a working select?

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

Here's the jsfiddle : http://jsfiddle.net/07woeam8/2/

Upvotes: 3

Views: 953

Answers (1)

Yaron Schwimmer
Yaron Schwimmer

Reputation: 5357

You have several options here, but there are trade-offs that you need to consider.

First, the thing that is messing up your selections is the track by expression, which shouldn't be player.team because you are not selecting teams. It should be either player.name or nothing at all. Keep in mind that tracking by player.name will make the groups in the select object to not be updated in real-time.

Second, if you want the groups in the option menu to change dynamically, you need to change the entire $scope.players object, and not just change a string value inside of it. For example, you can use angular.copy:

$scope.change = function() {
  var copy = angular.copy($scope.players);
  copy[0].team = 'betsdfhsk';
  $scope.players = copy;
};

This presents the other trade-off you need to consider. Changing the object reference completely will also void your selected object if you didn't use track by player.name in the first option.

But here's a working fiddle.

Upvotes: 1

Related Questions