Question

在以下链接中：

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

提示对话框只有一个输入字段。有人可以告诉我如何使用mdDialog在这个提示对话框中有多个输入字段？如何控制输入字段的顺序，以及是否可以使用文本框代替输入行。谢谢。

Answer 1

不，不使用＆＃34;提示＆＃34; $ mdDialog服务的方法。但你可以做的是使用$ mdDialog.show（），它将获取一个对象，包括一个属性＆＃39; templateUrl＆＃39;您可以使用它来包含指向自定义HTML模板文件的链接。

例如：

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

};

在HTML模板文件（在上例中名为＆＃39; dialog1.tmpl.html＆＃39;）中，您可以根据需要添加任意数量的输入字段。您可以使用控制器进行控制。当然，您需要为此编写一些自定义代码...

Answer 2

您可以拥有模板并加载

<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

AngularJS中的弹出对话框中有多个输入框？

2 个答案: