Angularjs Material Datepicker не работает, когда я пытаюсь использовать его с ng-switch

Я пытаюсь использовать angular material datepicker с ng-переключателем,который я дал переключателям на основе выбора даты выбора радио. Но это работает не так, как ожидалось.

Вот как выглядит мой код.

кнопки Radio

<div class = "row radio">
            <md-radio-group ng-model="data.group1">

              <md-radio-button  class="md-primary fix-width" ng-model="myVar" value="OneWay">One-way</md-radio-button>
              <md-radio-button  class="md-primary fix-width" ng-model="myVar" value="RoundTrip">Round Trip </md-radio-button>
              <md-radio-button  class="md-primary fix-width" ng-model="myVar" value="MultyWay">Multi-Way + Hotal</md-radio-button>

            </md-radio-group>
        </div>

Выбор даты

    <div class = "row Date" ng-switch="myVar">
    <div class = "col-lg-1"></div>
    <div class = "col-lg-6" ng-switch-default>
          <md-input-container>
            <label>Depart on</label>
            <md-datepicker ng-model="user.submissionDate"></md-datepicker>
          </md-input-container>
    </div>
    <div class = "col-lg-10" ng-switch-when="RoundTrip">
          <md-input-container>
            <label>Depart on</label>
            <md-datepicker ng-model="user.submissionDate"></md-datepicker>
          </md-input-container>

          <md-input-container>
            <label>Return on</label>
            <md-datepicker ng-model="user.submissionReturnDate"></md-datepicker>
          </md-input-container>
    </div>
    </div>

когда я нажимаю на один из способов, он должен показать один datepicker, и если я выбираю туда и обратно, он должен показать блок туда и обратно.

Надеюсь, для этой функции не требуется js?

Могу ли я знать, что неправильно слышать?

1 ответ

  1. ng-model="myVar" должен быть на md-radio-groupэлементе-CodePen

    Кроме того, если вы посмотрите в консоли есть ошибка относительно размещения md-datepickerв md-input-containerэлементе.

    Разметка

    <div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
      <div>
        <md-radio-group ng-model="myVar">
          <md-radio-button  class="md-primary fix-width" value="OneWay">One-way</md-radio-button>
          <md-radio-button  class="md-primary fix-width" value="RoundTrip">Round Trip </md-radio-button>
          <md-radio-button  class="md-primary fix-width" value="MultyWay">Multi-Way + Hotal</md-radio-button>
        </md-radio-group>
      </div>
    
      <div ng-switch="myVar">
        <div ng-switch-default>
          <div layout="column">
            <label>Depart on</label>
            <md-datepicker ng-model="user.submissionDate"></md-datepicker>
          </div>
        </div>
        <div ng-switch-when="RoundTrip">
          <div layout="column">
            <label>Round trip</label>
            <md-datepicker ng-model="user.submissionDate"></md-datepicker>
          </div>
        </div>
        <div ng-switch-when="MultyWay">
          <div layout="column">
            <label>Multi way</label>
            <md-datepicker ng-model="user.submissionReturnDate"></md-datepicker>
          </div>
        </div>
      </div>
    </div>