带有第二个占位符的角材料 $mdDialog答案

【问题标题】：Angular material $mdDialog with second place holder带有第二个占位符的角材料 $mdDialog
【发布时间】：2016-11-07 13:58:33
【问题描述】：

我正在尝试向角度材质对话框添加第二个输入，但我不确定是否可行。我尝试添加 Test2 占位符但没有用。提前感谢您的帮助。

 $scope.showPrompt = function (ev) {
    $scope.statusTopic = '';
    var confirm = $mdDialog.prompt()
      .title('Test?')
      .placeholder('Test1')
      //.placeholder('Test2')
      .targetEvent(ev)
      .ok('Okay!')
      .cancel('Cancel');

【问题讨论】：

您必须使用自定义对话框。
谢谢。我正在使用自定义对话框。你能给我指出正确的方向/教程/示例吗？

标签： javascript angularjs angular-material

【解决方案1】：

这是一个使用自定义对话框的示例 - CodePen

标记

<div ng-controller="MyController as vm" ng-cloak="" ng-app="app">
  <md-button class="md-primary md-raised" ng-click="vm.open($event)">
    Custom Dialog
  </md-button>
  <div ng-if="vm.showText" layout="column">
    {{vm.placeholder1}}
    <br>
    {{vm.placeholder2}}
  </div>

  <script type="text/ng-template" id="test.html">
    <md-dialog aria-label="Test">
        <div layout-padding layout="column">
        <md-input-container>
            <label>Placeholder 1</label>
          <input ng-model="vm.placeholder1">
        </md-input-container>
        <md-input-container>
            <label>Placeholder 2</label>
          <input ng-model="vm.placeholder2">
        </md-input-container>
        <md-button ng-click="vm.save()" class="md-primary">Save</md-button>
      </div>
    </md-dialog>
  </script>
</div>

angular.module('app',['ngMaterial'])

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

  this.save = function () {
    this.showText = true;
    $mdDialog.cancel();
  }
})

演示：

https://material.angularjs.org/latest/demo/input

文档：

https://material.angularjs.org/latest/api/directive/mdDialog https://material.angularjs.org/latest/api/service/$mdDialog

【讨论】：