3

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/

||||||
  • You need to change the object reference, not just the string value. – Vaelyr May 19 '16 at 6:13
  • Could you provide an example? It would be much appreciated. – ccostel May 19 '16 at 6:31
  • What do you mean by select dropdown is broken? Can you add your expected output? It is not clear in your question what you are expecting. – Khalid Hussain May 19 '16 at 6:35
  • Note that the option you select is not the one that is actually selected. – ccostel May 19 '16 at 6:50
1

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.

||||||
  • Thank you for your answer. It seems like the second way is the one to go with. I will try it and see if it works, though it might cause me to add some extra loops. Do you know why angular is acting like this? – ccostel May 19 '16 at 8:42
  • 1
    What do you mean by "acting like this"? with the track by thing, I think it's pretty obvious - you were telling angular to track the selection by group, so it couldn't make the distinction between different objects with the same group. With changing the team's value, I guess angular performs a shallow watch on the array, rather than deep watch. – Yaron Schwimmer May 19 '16 at 9:00
  • Sorry for unclarity. I mean why isn't the group name changing dynamically in the ng-options? – ccostel May 19 '16 at 9:03
  • 1
    So like I said, I can only guess that angular performs a shallow watch on the array. that is, checking if items were added or removed from it, but not checking if existing objects were changed. – Yaron Schwimmer May 19 '16 at 9:06
  • 1
    If, for example, your change function will remove or add an object to the players array, you will see it added immediately to the select options – Yaron Schwimmer May 19 '16 at 9:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.