当前位置: 代码迷 >> JavaScript >> 角度下拉列表始终默认为默认值
  详细解决方案

角度下拉列表始终默认为默认值

热度:96   发布时间:2023-06-06 08:55:34.0

我有一个包含此数据的角度下拉列表:

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

我有一个下拉列表,看起来像这样:

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

此选择位于模式窗口中。 它可以正常工作,因此所选值可以在模型中正确表示。

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

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

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

在此先感谢大家!

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

由于您没有提供整个控制器,因此以下是您需要做的事的样本。

查看工作的

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" ,将颜色名称添加到标签中

  相关解决方案