如何在角度材质的对话框内容中显示下拉/下拉列表/选择列表？

Question

我是AngularJS的新手，我正在使用Angular Material和Dialog恰好是Custom 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(); 
    }; 
    } 
})