#angularjs #html #twitter-bootstrap #datepicker #angular-material
#angularjs #HTML #twitter-bootstrap #datepicker #angular-material
Вопрос:
Я пытаюсь использовать 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?
Могу ли я узнать, что не так слышно?
Ответ №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>