Question

你好，我使用angularJs和bootstrap开发Web应用程序。我在模态窗口中使用选择时遇到问题。这是一个有效的plunker文件的链接。
http://plnkr.co/edit/mcl2BMQhWRvRffvbw2nX?p=preview

只是为了让您了解我的问题。我无法提供真正的代码，因为它适用于一个机密的大学项目。而且我无法在plunker中制作类似的代码，但这些代码并不起作用。

＆＃13;

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {

  $scope.items = ["item1","item2","item3"];
  
  $scope.open = function () {
    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl,
      resolve: {
            items: function() {
              return $scope.items;
            }
          }
    });
  };
  
};

var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
  $scope.items = items;
  
  $scope.ok = function () {
    $modalInstance.close($scope.items);
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
  
};

＆＃13;

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function($scope, $modal, $log) {

  $scope.items = ["item1", "item2", "item3"];

  $scope.open = function() {
    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl,
      resolve: {
        items: function() {
          return $scope.items;
        }
      }
    });
  };

};

var ModalInstanceCtrl = function($scope, $modalInstance, items) {
  $scope.items = items;

  $scope.ok = function() {
    $modalInstance.close($scope.items);
  };

  $scope.cancel = function() {
    $modalInstance.dismiss('cancel');
  };

};

＆＃13;

所以我的问题如下：在select标签中（在视图中）我可以看到所有选项但我无法选择它们。
我试图放一个＆＃34;。＆＃34;在我的ng-model参考中，我尝试使用父作用域。（我认为我对范围很好，我阅读了有关它的所有文档，我在论坛上阅读了几个主题，我尝试了很多东西）。
因此，我非常确定问题并非直接来自范围。（此外，我不希望触发父范围，因此它应该以正常方式工作）。

问题是，ng-options无法在<select>中使用ng-model。所以我猜我的$scope.selectedItem是在某个地方创建的。但之后选择被阻止，我无法选择任何东西。
如果我在控制器中为我的$scope.selectedItem添加了默认值，则会更新选择标记并显示默认值。但我仍然无法选择其他任何东西。

你对它的来源有什么想法吗？

提前谢谢你，对不起我的英语：）

Answer 1

我找到了解决问题的方法。使用bootstrap，我们可以创建模态窗口而无需在javascript文件中声明任何内容。为此，我们必须在使用它的html文件中包含模态窗口这是一个显示解决方案的例子（它与上面的例子不同）：

这段代码打开了模态：

<div ng-include="getItemTemplate('modalVariables')"></div>
<button type="button" class="btn btn-primary btn-section" data-toggle="modal" data-target="#variablesModal">Variables</button>

在模式中我们有：

<div class="modal fade" id="variablesModal" role="dialog" aria-labelledby="modalTitle" aria-hidden="true" tabindex="-1">
<!-- content of the modal window here -->
</div>

使用此代码，模态内部的选择正确地为我工作。但我仍然不知道为什么之前没有工作。

Angularjs Select不适用于模态窗口

1 个答案: