Angular dropdown always defaults to default value

Question

I have an angular dropdown which contains this data:

.constant('colors', {
   1 : red,
   2 : blue,
   3 : yellow
})

and I have a dropdown which looks like this:

 ng-options="key as key for (key, value) in colors"

This selection is in modal window. It works correctly, so the selected value is correctly represented in model.

However, when I reopen the modal window, dropdown always defaults to the default value, ignoring previously selected value.

Can anybody hlep me fix this, please?

Also, is it possible to display both key and value in the dropdown? So instead of dropdown like: 1, 2, 3 I want something like 1 - red, 2 - blue, 3 - yellow. Also, I do not want to display color names only, because I need the numbers.

Thanks in advance guys!

To change the label it's like this ng-options="key as (key+' - '+value) for (key, value) in colors". Can you also add the code which is suppose to save your variable which is use when you reopen the modal ? — Pierre-Alexandre Moller
– Pierre-Alexandre Moller, Commented Aug 7, 2015 at 7:35
Yes I do. It seems it has something to do with the fact that data source is a key,value object, because when I tried to replace ng-options with few hard-coded options, everything worked fine. Also after debugging, when modal is opened, the selected value is correctly associated to the controller variable, so I guess the problem is that it cannot correctly associate model value with dropdown data. — Tomáš Mocek
– Tomáš Mocek, Commented Aug 7, 2015 at 8:48

mikeagoff · Accepted Answer · 2015-08-10 11:58:19Z

When you open the modal it should be done as a function set to a variable, which you can then call after the modal closes. You also need to utilize $modalInstance to pass the selection back to the controller.

Since you didn't provide your whole controller, the below is a sample of what you need to do.

View the working Plunker

angular.module('myApp', ['ui.bootstrap']);

angular.module('myApp').controller('MyController', function ($scope, $modal) {

  $scope.colors = {
     1 : 'red',
     2 : 'blue',
     3 : 'yellow'
  }

  $scope.selection = "";

  $scope.openModal = function () {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: 'modalController',
      size: 'sm',
      resolve: {
        selection: function () {
          return $scope.selection;
        },
        colors: function () {
          return $scope.colors;
        }
      }
    });

    modalInstance.result.then(function (selection) {
      $scope.selection = selection;
    })
  };
});


angular.module('myApp').controller('modalController', function ($scope, $modalInstance, selection, colors) {

  $scope.colors = colors;
  $scope.selection = selection;

  $scope.ok = function () {
    $modalInstance.close($scope.selection);
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
});

As Pierre mentioned, set you ng-options up like: ng-options="key as (key + ' - ' + value) for (key, value) in colors" to add the color name to the label

Collectives™ on Stack Overflow

Angular dropdown always defaults to default value

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related