Question

我希望在角度ui bootstrap $ modal中有一个Angular材质md-select。

我正在尝试使用以下代码

MyController1.js

$modal.open({ 
        templateUrl: My.html,
        controller: MyController2, 
        backdrop: true, 
        windowClass: 'modal'
    });

My.html

<div layout="row">
  <md-input-container>
    <label>Items</label>
    <md-select ng-model="selectedItem" md-selected-text="getSelectedText()">
      <md-optgroup label="items">
        <md-option ng-value="item" ng-repeat="item in items">Item {{item}}</md-option>
      </md-optgroup>
    </md-select>
  </md-input-container>
</div>

MyController2.js

$scope.items = [1, 2, 3, 4, 5, 6, 7];
$scope.selectedItem;
$scope.getSelectedText = function() {
    if($scope.selectedItem !== undefined) {
        return "Selected: " + $scope.selectedItem;
    } else {
        return "Please select an item";
    }
};

我可以在模态弹出窗口中查看md-select小部件。但如果我尝试从“下拉列表”中选择值，则列表在$ modal的后面打开。

我的编辑问题：添加更多内容以获得确切答案

我可以使用md-dialog实现相同目标。但我的代码就像这样

MyController2.js

angular.module('myModule', [
])
 .controller('MyController2', ['$mdDialog', '$scope', 
function($mdDialog, $scope) {
    $scope.items = [1, 2, 3, 4, 5, 6, 7];
    $scope.selectedItem;
    $scope.getSelectedText = function() {
    if($scope.selectedItem !== undefined) {
        return "Selected: " + $scope.selectedItem;
    } else {
        return "Please select an item";
    }
  };
  });

所以如果我在 MyController1.js

中有如下代码

$mdDialog.show({
  controller: MyController2,
  templateUrl: 'My.html',
  parent: angular.element(document.body),
  // targetEvent: ev,
  clickOutsideToClose:true
})
    .then(function(answer) {
      $scope.status = 'You said the information was "' + answer + '".';
    }, function() {
      $scope.status = 'You cancelled the dialog.';
    });

它给了我错误Error: MyController2 is not defined

Answer 1

试试这个：

.md-select-menu-container {z-index：9999;}

Answer 2

只需将其添加到AL Tafas答案中，要使点击消失，您需要将其添加到md-backdrop元素中。

/* Angular Material Overrides */
.md-select-menu-container, md-backdrop {
    z-index: 9999 !important;
}

Answer 3

使用简单的 CSS技巧，您可以克服此问题

必须大于引导弹出窗口的 z-index

.md-select-menu-container {
    z-index: 900;
}

必须小于上述值（900）。否则，单击背景时md-select不会自行关闭。

md-backdrop.md-select-backdrop {
    z-index: 899;
}

如何在AngularJS ui bootstrap $ modal中使用md-select？

3 个答案: