当我尝试将其与 ng-switch 一起使用时，Angularjs Material Datepicker 无法正常工作答案

【问题标题】：Angularjs Material Datepicker is not working when i am trying to use it with ng-switch当我尝试将其与 ng-switch 一起使用时，Angularjs Material Datepicker 无法正常工作
【发布时间】：2016-10-07 01:54:08
【问题描述】：

我正在尝试将 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>

当我单击一种方式时，它应该显示单个日期选择器，如果我选择往返，它应该显示往返块。

希望这个功能不需要js？

我可以知道什么是错的吗？

【问题讨论】：

标签： angularjs html twitter-bootstrap datepicker angular-material

【解决方案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>

【讨论】：