角材料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
});