基于 angular 对象值的预设下拉列表

Question

我有一个下拉菜单，用户可以在其中选择三个选项之一。根据他们的选择，在控制器中触发一个函数来设置事件对象的两个属性的值。

这是下拉菜单：

    <select type="text" id="private_gallery" class="form-control" ng-model="gallerySetting" ng-options="setting for setting in gallery_settings" ng-change="setGalleryType(gallerySetting)">
    </select>

这是填充下拉列表的控制器代码：

$scope.gallery_settings = ['Public', 'Private', 'Hidden'];

当 Public、Private 或 Hidden 被选中时，它们将被传递到 setGalleryType 函数中，如下所示：

  $scope.setGalleryType = function (galleryType) {
    switch (galleryType) {
      case 'Public':
        $scope.event.private_gallery = 0;
        $scope.event.active = 1;
        break;
      case 'Private':
        $scope.event.private_gallery = 1;
        $scope.event.active = 1;
        break;
      case 'Hidden':
        $scope.event.private_gallery = 0;
        $scope.event.active = 0;
        break;
    }
  };

所有这些都按预期工作。问题是重新加载应用程序时。由于 gallerySetting 模型未存储在后端，因此下拉列表不再填充正确的选项。这让用户非常困惑，他们认为设置没有正确保存。

我需要根据 event.private_gallery 和 event.active 值以某种方式设置下拉菜单。我尝试了下面的代码，但这会导致范围问题，并且在下拉列表被识别为 Angular 之后没有任何内容：

$scope.setGallerySetting = function() {
    if ($scope.event.private_gallery == 0 && $scope.event.active == 1){
      return 'Public';
    } ...
  };

$scope.gallerySetting = $scope.setGallerySetting();

对执行此操作的基本方法有什么想法吗？

Answer 1

我能够将此添加到控制器：

  var setGallerySetting = function() {
    if ($scope.event.private_gallery == 0 && $scope.event.active == 1){
      $scope.gallerySetting =  'Public';
    } else if ($scope.event.private_gallery == 1 && $scope.event.active == 1){
      $scope.gallerySetting =  'Private';
    } else {
      $scope.gallerySetting = 'Hidden';
    }
  };

  $scope.$watch('event.active', setGallerySetting);
  $scope.$watch('event.private_gallery', setGallerySetting);

这会查找对 event.active 或 event.private_gallery 模型的任何更改，并相应地设置 gallerySetting 模型。这是一种低效的方法，因为我们只需要它在应用程序运行时运行一次，因此我们将不胜感激任何改进建议。

基于 angular 对象值的预设下拉列表

Preset dropdown based on values of angular object

javascript

angularjs

drop-down-menu

dropdown