0

マテリアル デザイン ダイアログ ボックス内でマテリアル デザイン要素を使用すると問題が発生します。ユーザーがリクエストを拒否する 3 つの理由から選択できるようにする md-select 要素を表示したいのですが、その選択内から事前に確立されたオプションを選択する代わりに、ユーザーは md に別の理由を残すこともできます。 -ダイアログのテキストエリア。ただし、md-input-container が適切に表示されている間、md-select および md-option 要素は無視され、要素内のテキストのみが残ります。

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 に答える