Nongthonbam Tonthoi Nongthonbam Tonthoi - 2 months ago 43
AngularJS Question

How do I show a dropdown/dropdown list/select list inside of a angular material's dialog's content?

I am pretty new to AngularJS and I am using Angular Material and Dialog precisely the Custom Dialog to show a popup dialog.

Now I am able to show the Dialog, but the problem is that I am not able to show a dropdown inside of the dialog's

<md-dialog-content>
tag.

I show the dialog when I click a button. The minimized code which I copied from the links I added above:

$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.';
});
}


Now the printDialog.html (which is also copied and file name changed to full my needs):

<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>




Now, how do I show a drop down selectable list with a default selected item inside of this dialog.

Any help would me much appreciated.

Answer

Here's a very simple example - CodePen

Markup

<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();
    };
  }
})