Как использовать md-select в загрузочном интерфейсе AngularJS с интерфейсом $?

0

Я хочу иметь угловой материал md-select в угловом бутстрапе $ modal.

Я пытаюсь использовать следующий код

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 в модальном всплывающем окне. Но если я попытаюсь выбрать значение из раскрывающегося списка, список будет открыт в конце модального мода.

Мой отредактированный вопрос: добавление нескольких вещей для получения точного ответа

Я могу добиться того же, используя 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

  • 0
    вы можете поиграть со свойством z-index css на задействованных элементах, чтобы решить проблему
  • 1
    Попробуйте это: controller: 'MyController2' , для решения ошибки не определен контроллер.
Показать ещё 1 комментарий
Теги:
angular-material
angular-ui
angular-ui-bootstrap

1 ответ

1

попробуй это:

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню