角材料日期选择器在 ng 重复中不起作用答案

【问题标题】：Angular material datepicker not working inside ng repeat角材料日期选择器在 ng 重复中不起作用
【发布时间】：2015-11-13 05:45:35
【问题描述】：

我正在尝试使用角度材料库中的日期选择器。我能够使它工作。但问题是当我在 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，它就可以正常工作。

感谢任何帮助。

谢谢

【问题讨论】：

您的角度未加载到给定的 plunkr 中

标签： angularjs datepicker angularjs-ng-repeat angular-material

【解决方案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 变量 - 不确定这是否是所需的行为。

【讨论】：

感谢基思姆。这使得它可以给出正确的警报日期。但我希望能够在每个日期选择器上有不同的日期，而不是所有日期选择器的范围相同。我怎样才能得到它？
那你需要使用ng-repeat中的date来存储日期：ng-model="date.myDate"

【解决方案2】：

keithm 是对的。 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);
}

【讨论】：