javascript - 如何在 Angular Material 对话框内容内显示下拉列表/下拉列表/选择列表？

Question

我对 AngularJS 还很陌生，我正在使用 Angular Material和 Dialog正是自定义对话框来显示弹出对话框。

现在我可以显示对话框，但问题是我无法显示对话框 <md-dialog-content> 内的下拉菜单标签。

单击按钮时显示对话框。我从上面添加的链接复制的最小化代码:

$scope.onClicked = function(ev) {
        $mdDialog.show({
            controller: DialogController,
            templateUrl: 'app/html/printDialog.html',
            parent: angular.element(document.body),
            targetEvent: ev,
            clickOutsideToClose:true,
            fullscreen: $scope.customFullscreen
        })
            .then(function(answer) {
                $scope.status = 'You said the info was "' + answer + '".';
            }, function() {
                $scope.status = 'You cancelled the dialog.';
            });
    }

现在是printDialog.html(也被复制并更改文件名以满足我的需要):

<md-dialog aria-label="Print Report">
    <form ng-cloak>
        <md-toolbar>
            <div class="md-toolbar-tools">
            The toolbar or headers
        </div>
    </md-toolbar>

    <md-dialog-content>
        <div class="md-dialog-content">
        All the contents goes here
        </div>
    </md-dialog-content>

    <md-dialog-actions layout="row">
        All the dialog actions goes here
    </md-dialog-actions>
</form>

现在，如何在该对话框中显示带有默认选定项目的下拉可选列表。

任何帮助我都会非常感激。

Answer 1

这是一个非常简单的示例 - CodePen

标记

<div ng-controller="MyController as vm" id="popupContainer" ng-cloak="" ng-app="app">
   <md-button class="md-primary md-raised" ng-click="vm.open($event)">
      Open
    </md-button>
  <script type="text/ng-template" id="printDialog.html">
    <md-dialog aria-label="Print Report">
        <form ng-cloak>
            <md-toolbar>
                <div class="md-toolbar-tools">
                The toolbar or headers
            </div>
        </md-toolbar>

        <md-dialog-content>
            <div class="md-dialog-content" layout="column">
            All the contents goes here
            <md-input-container>
              <label>Select Beatle</label>
              <md-select ng-model="chosenOption">
                <md-option ng-repeat="option in options" ng-value="option">
                {{option}}
                </md-option>
                </md-select>
            </md-input-container>

            </div>
        </md-dialog-content>

        <md-dialog-actions layout="row">
            All the dialog actions goes here
        </md-dialog-actions>
    </form>
    </md-dialog>
  </script>
</div>

JS

angular.module('app',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])

.controller('MyController', function($scope, $mdDialog) {
  this.open = function(ev) {
    $mdDialog.show(
      {
        templateUrl: "printDialog.html",
        clickOutsideToClose: true,
        controller: DialogController,
    });
  };

  function DialogController($scope, $mdDialog) {
    $scope.options = ["john", "paul", "george", "ringo"];
    $scope.chosenOption = "ringo"; // default

    $scope.$watch("chosenOption", function (newValue) {
      if (angular.isDefined(newValue)) {
        console.log(newValue);
      }
    });

    $scope.hide = function() {
      $mdDialog.hide();
    };

    $scope.cancel = function() {
      $mdDialog.cancel();
    };
  }
})