Question

我试图使用角度素材库中的日期选择器。我能够让它发挥作用。但问题是，当我在ng-repeat循环中使用日期选择器时，它似乎不起作用。即使我的ng-repeat中只有一个列表，它仍然无法正常工作。

不确定如何使这项工作。

div ng-controller="AppCtrl" style='padding: 40px;'>
<md-content ng-repeat="date in dates">
  <h3>{{date}}</h3>
  <form ng-submit="tellDate()">
  <md-datepicker ng-model="myDate" md-placeholder="Enter date" md-min-date="minDate" 
    md-date-filter="onlyWeekendsPredicate"></md-datepicker>
  <md-button type="submit">Tell Date</md-button>
  </form>
</md-content>

Here是plnkr。

尝试点击“告诉日期”按钮，它只显示当前日期，而不是您选择的日期。但如果没有ng-repeat，它就能正常工作。

感谢任何帮助。

由于

Answer 1

我认为这是因为md-datepicker创建了自己的scope - 如果您使用controller as语法，这将对您有用：

HTML：

<div ng-controller="AppCtrl as ac" style='padding: 40px;'>
<md-content ng-repeat="date in dates">
  <h3>{{date}}</h3>
  <form ng-submit="tellDate()">
  <md-datepicker ng-model="ac.myDate" md-placeholder="Enter date" md-min-date="minDate" 
    md-date-filter="onlyWeekendsPredicate"></md-datepicker>
  <md-button type="submit">Tell Date</md-button>
  </form>
</md-content>

控制器：

var vm = this;

$scope.tellDate = function() {
  alert(vm.myDate);
}

我更新了plnkr。在这种情况下，所有日期选择器都绑定到相同的myDate变量 - 不确定这是否是所需的行为。

Answer 2

基思是对的。 ng-repeat创建自己的隔离范围。我的建议是将每个重复的特定日期提供给“tellDate”函数。所以：

<div ng-controller="AppCtrl" style='padding: 40px;'>
  <md-content ng-repeat="date in dates">
  <h3>{{date}}</h3>
  <form ng-submit="tellDate(myDate)">
  <md-datepicker ng-model="myDate" md-placeholder="Enter date" ...></md-datepicker>
  <md-button type="submit">Tell Date</md-button>
</form>
</md-content>

在你的控制器内：

$scope.tellDate = function(date) {
 alert(date);
}

Angular material datepicker在ng repeat内部不起作用

2 个答案: