Блог

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

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

Переключатели

 <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?

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

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>