AngularJS将daterangepicker的日期存储到表单变量中

Question

我从thymeleaf到angularjs交换我的表单验证，我有一些问题， daterangepicker 。 对于角度，我阅读了有关角度的datarangepicker的信息，因此我想用它在表单字段中存储开始日期和结束日期。 这是我的HTML模式代码：

<div class="modal" id="addLicenseModal" data-ng-app="myApp">
    <div class="modal-dialog" id="addLicenseModaController" data-ng-controller="freeUserController">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                    aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">New license</h4>
            </div>
            <div class="modal-body">
                <div data-ng-show='users.length > 0'>
                <form novalidate class="simple-form" name="newLicenseForm">
                        <!-- form start -->
                        <div class="box-body">
                            <div class="form-group" id=existingUser>
                                <label>Username</label> 
                                <ui-select theme="bootstrap" style="width: 100%;"
                                data-ng-model="newLicense.username" required> <ui-select-match
                                placeholder="Select username">
                            {{$select.selected.username}}</ui-select-match> <ui-select-choices
                                repeat="user.username as user in (users | filter: $select.search) track by user.username">
                            <span data-ng-bind="user.username"></span> </ui-select-choices> </ui-select>
                            </div>
                            <div class="form-group">
                                <label>Date and time range</label>
                                <div class="input-group">
                                    <div class="input-group-addon">
                                        <i class="fa fa-clock-o"></i>
                                    </div>
                                    <input date-range-picker id="daterange1" name="daterange1" class="form-control date-picker" type="text"
                                        data-ng-model="newLicense.date" required/>
                            </div>
                            <div class="form-group">
                                <label>Execution number</label><span id="errmsg"
                                    style="float: right; color: red"></span> <input
                                    data-ng-model="newLicense.counter" id="executionNumber" type="number"
                                    class="form-control" placeholder="executionNumber" min="0" required>
                            </div>
                            <div class="form-group">
                                <label>MAC address</label> <input id="macAddress" type="text"
                                    class="form-control" data-ng-model="newLicense.macAddress" maxlength="25"
                                    placeholder="MAC address" required>
                            </div>
                            <div class="form-group">
                                <label>CPU ID</label> <input id="cpuId" type="text"
                                    class="form-control" data-ng-model="newLicense.cpuId" maxlength="25"
                                    placeholder="CPU ID" required>
                            </div>
                        </div>
                    </form>
                </div>
                <p data-ng-show="users.length == 0">All clients have the own
                    license, you can update a license with UPDATE button.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left"
                    data-dismiss="modal">Close</button>
                <button data-ng-show='users.length > 0' data-ng-disabled="newLicenseForm.$invalid"
                    data-ng-click="createLicense(newLicense)" id="createLicenseButton"
                    type="button" class="btn btn-primary">Create license</button>
                <button data-ng-show='users.length == 0' id="createLicenseButton"
                    type="button" class="btn btn-primary" disabled>Create
                    license</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
<!-- /.modal-dialog -->
</div>

在JavaScript中，我有此代码

var app = angular.module('myApp',['daterangepicker','ui.select']);
app.controller('freeUserController',['$scope','$http', function($scope, $http) {
    $scope.datePicker.date = {startDate: null, endDate: null};
    //Create new user from modal
    $scope.createLicense = function(newLicense) {
        $http({
            method: 'POST',
            url: '',
            headers: {'Content-Type': 'application/json'},
            data : newLicense,
        }).then(function successCallback(response) {
            if (response.data.success==true){   
                ajaxResultPost();
                licenseTable.ajax.reload();
                $('#addLicenseModal').modal("hide");
                notifyMessage(data.result, 'success');
            } else {
                notifyMessage(response.data.result, 'error');
            }                       
        }, function errorCallback(response) {
            window.location.href = "/ATS/500";
        });

    };
}]);

我收到异常Cannot set property 'date' of undefined在$scope.datePicker.date = {startDate: null, endDate: null};上Cannot set property 'date' of undefined $scope.datePicker.date = {startDate: null, endDate: null}; 行。 有人使用此插件存储表单信息吗？

Answer 1

您的问题在于数据绑定，特别是在这里：

 <input date-range-picker id="daterange1" name="daterange1" class="form-control date-picker" type="text"  data-ng-model="newLicense.date" required/> 

因为从未定义$scope.newLicense.date 。

要解决此问题，请执行以下代码行：

 $scope.datePicker.date = {startDate: null, endDate: null};

应该像：

 $scope.newLicense = {};
 $scope.newLicense.date = {startDate: null, endDate: null};

在你的ajax发布中，你的数据应该是$ scope.newLicense

因此您的控制器应类似于：

 var app = angular.module('myApp',['daterangepicker','ui.select']);
    app.controller('freeUserController',['$scope','$http', function($scope, $http) {
        $scope.newLicense = {};
        $scope.newLicense.date = {startDate: null, endDate: null};
        //Create new user from modal
        $scope.createLicense = function(newLicense) {
            $http({
                method: 'POST',
                url: '',
                headers: {'Content-Type': 'application/json'},
                data : $scope.newLicense,
            }).then(function successCallback(response) {
                if (response.data.success==true){   
                    ajaxResultPost();
                    licenseTable.ajax.reload();
                    $('#addLicenseModal').modal("hide");
                    notifyMessage(data.result, 'success');
                } else {
                    notifyMessage(response.data.result, 'error');
                }                       
            }, function errorCallback(response) {
                window.location.href = "/ATS/500";
            });

        };
    }]);

这是一个有效的演示