2016-11-07 108 views
1

我想添加第二个输入到角度材质对话框,但我不确定它是否可能。我试图添加Test2占位符,但没有工作。感谢您提前的帮助。

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

你将不得不使用一个自定义对话框。 –

+0

谢谢。我正在使用自定义对话框。你能指点我正确的方向/教程/例子吗? – user6934713

回答

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> 

JS

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