如何從日期選擇器數據綁定到一個普通NG-模型

Question

jsp頁面：

<label>Script ID:</label> 
     <input name="scriptId" type="text" 
      ng-model="selectedScript.scriptId" 
      ng-disabled="true" 
      value="{{selectedScript.scriptId}}" 
      /> 


<form> 
     <h1>Date Pannel</h1> 
     <fieldset> 
     Pick a start date:<br> 
     <input ng-disabled = "mode =='BROWSE'" type="date" id="datePickerStart" ng-model="parent.startDate" onchange="document.getElementById('datePickerEnd').setAttribute('min', document.getElementById('datePickerStart').value)"><br><br> 
     Pick an end date:<br> 
     <input ng-disabled = "mode =='BROWSE'" type="date" id="datePickerEnd" ng-model="parent.endDate" ><br><br> 
     <button ng-disabled = "mode =='BROWSE'" ng-click="setDates()" 
     >Set Dates</button> 
     </fieldset> 
    </form> 

controller.js

$scope.parent = {startDate:''}; 
$scope.parent = {endDate:''}; 
$scope.selectedScript.startDate = null; 
$scope.selectedScript.endDate = null; 


$scope.setDates = function setDates() { 
      $scope.selectedScript.startDate = $scope.parent.startDate.getTime(); 
      $scope.selectedScript.endDate = $scope.parent.endDate.getTime(); 

      myAppFactory.setDates($scope.selectedScript.startDate, $scope.selectedScript.endDate, $scope.selectedScript.src).success(function(data) { 
       $scope.selectedScript.src=data; 
      }); 

     } 

這就是我所需要的代碼得到一些東西，做...

現在我有一個表，我的JSP頁面上...

<tr 
       ng-repeat="s in scripts 
       ng-click="selectScript(s, $index)" 
       ng-class="getSelectedClass(s)"> 
       <td>{{s.scriptId }}</td> 
       <td>{{s.fileName }}</td> 
</tr> 

個controller.js

$scope.selectScript = function(script, index) { 
      if ($scope.mode != 'BROWSE') 
       return; 
      $scope.parent.startDate = $scope.selectedScript.startDate; <-- this part 
      $scope.parent.endDate.setTime = $scope.selectedScript.endDate; <--and this 

      $scope.selectedScript = script; 
      $scope.selectedRow = index; 
     }; 

當我保存腳本，在數據庫中的數據的startDate和結束日期 的作品......

我的問題是selectedScript爲模型，在上面的代碼，在startDate和endDate中沒有任何值...它爲空（但字段存在，並且數據庫有我需要的數據）

但是我需要某種方式使parent.startDate和endDate綁定成爲可能到selectedScript的startDate和endDate ...

順便說一句，我第一次嘗試使日期選擇器的ng模型像selectedScript.startDate，但沒有工作... 後來我發現datepicker有它自己的範圍，這是我的問題..至少我相信如此。

我只是希望我已經讓自己清楚... 你能幫助我嗎？

Answer 1

我認爲你的問題是因爲當你從數據庫中檢索數據時，它將它作爲字符串傳遞，它不是datepicker可以讀取的格式。

基本上你需要做的是將它解析爲日期屬性，做到這一點你可以做到;

$scope.parent.startDate = new Date($scope.selectedScript.startDate); 
$scope.parent.endDate = new Date($scope.selectedScript.endDate); 

在相關的地方使用這個解析爲日期，或者你可以設置一個手錶爲你改變值;

$scope.$watch('parent.startDate', function(startDate){ 
$scope.parent.startDate = new Date($scope.parent.startDate); 
}); 

您只能使用$ watch作爲單個值，或者您可以將整個對象視爲「父」。

希望它有幫助！