Mehrere Eingabefelder im Popup-Dialogfeld in AngularJS?

Question

in der folgenden Verbindung:

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

das prompte Dialogfeld hat nur ein Eingabefeld. Kann mir bitte jemand sagen, wie kann ich mehr als ein Eingabefeld in diesem Dialog mit mdDialog haben? Und wie kann ich die Reihenfolge der Eingabefelder steuern und auch, wenn es möglich ist, ein Textfeld anstelle einer Zeile für die Eingabe zu haben. Vielen Dank.

Answer 1

Sie können eine Vorlage und Last haben

<md-dialog aria-label="Full Screen Dialog Test" class="fullscreen-dialog"> 
    <md-toolbar> 
    <div class="md-toolbar-tools"> 
     <md-button ng-click="closeDialog()" class="md-icon-button"> 
     <md-icon class="fa fa-times fa-2x"></md-icon> 
     </md-button> 
     <h2 flex="flex">Full Screen Dialog Test</h2> 
    </div> 
    </md-toolbar> 
    <md-dialog-content> 
    <form name="userForm"></form> 
    <div layout="layout" layout-sm="column"> 
     <md-input-container style="width:80%"> 
     <label>Company (Disabled)</label> 
     <input ng-model="user.company" disabled="disabled"/> 
     </md-input-container> 
     <md-input-container flex="flex"> 
     <label>Submission Date</label> 
     <input type="date" ng-model="user.submissionDate"/> 
     </md-input-container> 
    </div> 
    <div layout="layout" layout-sm="column"></div> 
    <md-input-container flex="flex"> 
     <label>First name</label> 
     <input ng-model="user.firstName"/> 
    </md-input-container> 
    <md-input-container flex="flex"> 
     <label>Last Name</label> 
     <input ng-model="theMax"/> 
    </md-input-container> 
    <md-input-container flex="flex"> 
     <label>Address</label> 
     <input ng-model="user.address"/> 
    </md-input-container> 
    <md-input-container md-no-float="md-no-float"> 
     <input ng-model="user.address2" placeholder="Address 2"/> 
    </md-input-container> 
    <div layout="layout" layout-sm="column"> 
     <md-input-container flex="flex"> 
     <label>City</label> 
     <input ng-model="user.city"/> 
     </md-input-container> 
     <md-input-container flex="flex"> 
     <label>State</label> 
     <input ng-model="user.state"/> 
     </md-input-container> 
     <md-input-container flex="flex"> 
     <label>Postal Code</label> 
     <input ng-model="user.postalCode"/> 
     </md-input-container> 
    </div> 
    <md-input-container flex="flex"> 
     <label>Biography</label> 
     <textarea ng-model="user.biography" columns="1" md-maxlength="150"></textarea> 
    </md-input-container> 
    </md-dialog-content> 
</md-dialog> 

DEMO

Answer 2

Nein, nicht die "prompt" Methode auf den Service $ mdDialog verwenden. Aber was Sie tun können, ist die $ mdDialog.show(), die ein Objekt einschließlich einer Eigenschaft 'templateUrl' nehmen wird, die Sie verwenden können, um eine Verknüpfung zu einer benutzerdefinierten HTML-Vorlagendatei aufzunehmen.

Und Beispiel:

$scope.showAdvanced = function(ev) { 
    $mdDialog.show({ 
     controller: DialogController, 
     templateUrl: 'dialog1.tmpl.html', 
     parent: angular.element(document.body), 
     targetEvent: ev, 
     clickOutsideToClose:true, 
     fullscreen: $scope.customFullscreen // Only for -xs, -sm breakpoints. 
}) 
.then(function(answer) { 
    $scope.status = 'You said the information was "' + answer + '".'; 
}, function() { 
    $scope.status = 'You cancelled the dialog.'; 
}); 

};

In der HTML-Vorlagendatei (im obigen Beispiel "dialog1.tmpl.html" genannt) können Sie beliebig viele Eingabefelder einfügen. Welche Sie mit dem Controller steuern können. Natürlich müssen Sie dafür einen eigenen Code schreiben ...