0

我在材料设计对话框中使用材料设计元素时遇到问题。我想显示一个 md-select 元素，允许用户从他们拒绝请求的三个原因中进行选择，而不是从该选择中选择预先建立的选项，用户还可以在 md 中留下另一个原因-对话框文本区域。但是，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');
4

2 回答 2

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>

演示

于 2016-12-12T14:59:50.253 回答
0

.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() {

  });
于 2016-12-12T16:35:42.000 回答