角材料DateTimepicker

Question

我正在使用此http://logbon72.github.io/angular-material-datetimepicker/ （角度材料日期时间选择器），当只有一个时，它会很好地工作

<md-input-container flex-gt-md="200">
    <input time="false" date="true" mdc-datetime-picker type="text" id="date"
           placeholder="Posting Date" format="YYYY-MM-DD"
           ng-model="posting_date" min-date="minDate" max-date="maxDate">
</md-input-container>

但是当我在（ng-repeat）中这样编码时失败了

<div ng-repeat="JobExp in jobpostings">
    <md-input-container flex-gt-md="200">
        <input time="false" date="true" mdc-datetime-picker type="text" id="date"
               placeholder="Posting Date" format="YYYY-MM-DD" md-select="changed()"
               ng-model="JobExp.posting_date" min-date="minDate" max-date="maxDate">
    </md-input-container>
</div>

我尝试调用md-select函数，但是它不调用也不用我使用$ watch进行ng-select这样的操作

$scope.$watch("JobExp.posting_date", function(newValue, oldValue) {
    $scope.JobExp.posting_date = $filter('date')(new Date($scope.JobExp.posting_date), 'yyyy-MM-dd');
    console.log("PostinDate:"+$scope.JobExp.posting_date);

}); 

它说无法在posting_date附近读取未定义的属性

我在做什么错？ 如何实现呢？

Answer 1

我看到的一个问题是，在您的ng-repeat ，对于所有的日期选择器， ng-model是JobExp.posting_date 。 从逻辑上讲这是错误的，因为您所有的日期选择器都将绑定到一个范围变量，而更改一个范围变量将更改所有其他范围值。

您应该考虑为每个日期选择器使用单独的ng-model 。 您可以这样设置单独的ng-model ：

<input time="false" date="true" mdc-datetime-picker type="text" id="date"
           placeholder="Posting Date" format="YYYY-MM-DD" md-select="changed()"
           ng-model="posting_date{{$index}}" min-date="minDate" max-date="maxDate">

这将为每个日期选择器提供单独的ng-model ，如下所示： posting_date0 ， posting_date1等...

为了在所有模型上放置手表，您可以像这样在集合上创建手表：

$scope.$watchCollection('[posting_date0, posting_date1]', function(newValues, oldValues){
  // do stuff here
  // newValues and oldValues contain the new and respectively old value
  // of the observed collection array
});