Angular 下拉菜单始终默认为默认值答案

【问题标题】：Angular dropdown always defaults to default valueAngular 下拉菜单始终默认为默认值
【发布时间】：2015-08-07 07:31:13
【问题描述】：

我有一个包含以下数据的角度下拉列表：

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

我有一个如下所示的下拉列表：

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

此选择位于模态窗口中。它工作正常，因此所选值在模型中正确表示。

但是，当我重新打开模式窗口时，下拉菜单始终默认为默认值，忽略之前选择的值。

有人可以帮我解决这个问题吗？

另外，是否可以在下拉菜单中同时显示键和值？因此，我想要的不是像 1、2、3 这样的下拉菜单，而是 1 - 红色、2 - 蓝色、3 - 黄色。另外，我不想只显示颜色名称，因为我需要数字。

提前谢谢大家！

【问题讨论】：

更改标签就像这样ng-options="key as (key+' - '+value) for (key, value) in colors"。您还可以添加代码来保存您重新打开模式时使用的变量吗？
那里有 ng-model 属性吗？
是的，我愿意。这似乎与数据源是键值对象这一事实有关，因为当我尝试用几个硬编码选项替换 ng-options 时，一切正常。同样经过调试，当modal打开时，选择的值与控制器变量正确关联，所以我猜问题是它不能正确地将模型值与下拉数据关联。

标签： javascript html angularjs drop-down-menu

【解决方案1】：

当您打开模态时，它应该作为一个设置为变量的函数来完成，然后您可以在模态关闭后调用它。您还需要利用 $modalInstance 将选择传递回控制器。

由于您没有提供整个控制器，以下是您需要做的示例。

查看工作中的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');
  };
});

正如 Pierre 所提到的，将您的 ng-options 设置为：ng-options="key as (key + ' - ' + value) for (key, value) in colors" 以将颜色名称添加到标签中

【讨论】：