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

Question

我将表单验证从thymeleaf切换到angularjs，并且我在daterangepicker中遇到了一些问题。对于角度，我读了约datarangepicker for angular，所以我想用它来存储startdate和enddate在我的表单字段。 这是我的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}; 行。 ？已经有人用这个插件来存储信息的形成得益于

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

     }; 
    }]); 

这是一个working demo