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

Question

我正在将我的表单验证从 thymeleaf 切换到 angularjs，但我在使用 daterangepicker. For angular I read about datarangepicker for angular 时遇到一些问题，所以我想用它在我的表单字段中存储开始日期和结束日期。这是我的 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";
        });

    };
}]);

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

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};

也在你的ajaxpost你的数据应该是$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";
            });

        };
    }]);

这是一个working demo

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

Angularjs store date of daterangepicker into form variable

javascript

forms

datetimepicker

angularjs

bootstrap-datetimepicker