如何将日期选择器中的数据绑定到常规 ng-model

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 页面上有一个 table...

<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和endDate 行得通...

我的问题是 selectedScript 作为模型，在上面的代码中，在 startDate 和 endDate 中没有任何值...它是空的（但字段存在，并且数据库有我需要的数据）

但我需要以某种方式使 parent.startDate 和 endDate 绑定到 selectedScript 的 startDate 和 endDate 成为可能...

顺便说一句，我第一次尝试使日期选择器的 ng-model 像 selectedScript.startDate，但是那没有用... 后来我发现日期选择器有它自己的作用域，这导致了我的问题......至少我是这么认为的。

我只是希望我已经说清楚了... 你能帮帮我吗？

Answer 1

我认为您的问题是因为当您从数据库中检索数据时，它会将其作为字符串传递，这不是日期选择器可以读取的格式。

基本上您需要做的是将其解析为 Date 属性，为此您可以做到；

$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 用于单个值，或者您可以将整个对象作为 'parent'.

希望对您有所帮助！

如何将日期选择器中的数据绑定到常规 ng-model

How to bind data from datepicker to a regular ng-model

html

jsp

bind

datepicker

angularjs