Question

我在材料设计对话框中使用材料设计元素时遇到问题。我想显示一个md-select元素，允许用户从三个原因中选择拒绝请求的原因，而不是从该选择中选择预先建立的选项，用户也可能在md中留下另一个原因-dialog textarea。但是，md-select和md-option元素被忽略，在md-input-container正确显示时只留下元素中的文本。

var confirm = $mdDialog.prompt()
.title('Reason for Declining Trip')
.htmlContent(
  "<md-dialog aria-label='List dialog'>" +
  "<md-dialog-content>" +
  "  <md-select ng-model='model' placeholder='Select a reason'>" +
  "    <md-option ng-value='opt'>Scheduling Conflict</md-option>" +
  "    <md-option ng-value='opt'>Personal Conflict</md-option>" +
  "    <md-option ng-value='opt'>Hours of Service Concern</md-option>" +
  "  </md-select>" +
  "<br>" +
  "  <md-input-container class='md-block'>" +
  "    <label>Other</label>" +
  "    <textarea rows='1' md-select-on-focus></textarea>" +
  "  </md-input-container>" +
  "</md-dialog-content>" +
  "</md-dialog>"
)
.ariaLabel('Lucky day')
.targetEvent(ev)
.ok('Decline the Trip')
.cancel('Cancel');

Answer 1

 <md-dialog aria-label="options dialog">
        <md-dialog-content layout-padding>
          <h2 class="md-title">Choose an option</h2>
          <md-select ng-model="myModel" placeholder="Pick">
            <md-option>1</md-option>
            <md-option>2</md-option>
            <md-option>3</md-option>
          </md-select>
        </md-dialog-content>
        <md-dialog-actions>
          <span flex></span>
          <md-button ng-click="close()">Okay!</md-button>
        </md-dialog-actions>
      </md-dialog>

<强> DEMO

Answer 2

我能够解决此问题，而不是将提示保存在变量中，调用.show()并直接传递信息。此外，htmlContent:密钥需要更改为template:。固定代码：

  $mdDialog.show({
      controller: AppCtrl,
      template: "<md-dialog aria-label='List dialog'>" +
          "<md-dialog-content layout-padding>" +
          "<h2>Reason for Declining Trip</h2>" +
          "  <md-select ng-model='model' placeholder='Select a reason'>" +
          "    <md-option>Scheduling Conflict</md-option>" +
          "    <md-option>Personal Conflict</md-option>" +
          "    <md-option>Hours of Service Concern</md-option>" +
          "  </md-select>" +
          "<br>" +
          "  <md-input-container class='md-block'>" +
          "    <label>Other</label>" +
          "    <textarea rows='2' md-select-on-focus></textarea>" +
          "  </md-input-container>" +
          "</md-dialog-content>" +
          "</md-dialog>",
      parent: angular.element(document.body),
      ariaLabel: 'Lucky day',
      targetEvent: ev,
      ok: 'Decline the Trip',
      cancel: 'Cancel'
  }).then(function() {
      $scope.status = 'You decided to decline this trip.';
      submit();
  }, function() {

  });

在$ mdDialog中忽略md-select

2 个答案: