Question

我有一个HTML格式的表单。下面是我使用datepicker的日期字段的相关行。

<input tabindex="3" class="date-picker" name = "startDate" type="text" id="startDate" ng-model = "startDate" ng-required="true">
<input tabindex="4" class="date-picker" name = "endDate" type="text" id="endDate" ng-model = "endDate" ng-required="true">

这是datepicker的javascript。

<script>
    $(function() {
        $( "#startDate" ).datepicker({
            dateFormat: "dd-mm-yy"
        });
    });

    $(function() {
        $( "#endDate" ).datepicker({
            dateFormat: "dd-mm-yy"
        });
    });

以下是表单的Angular JS控制器。我正在向后端发送REST请求并接收响应。

tournamentAddApp.controller('tournamentAddController', function ($scope, $window, $http) {

$scope.controller = "tournamentAddController";    

$scope.add = function () {
    var data = {
                name: $scope.tournamentName,
                location: $scope.location,
                status: $scope.status,
                description: $scope.description,
                startDate: $scope.startDate,
                endDate: $scope.endDate             

            };
    var url = "http://localhost:8080/crickmaster-app-userapp/controller/tournament/create";

    $http.post(url, data).success(function (data, status, headers, config) {
    //console.log(data);
    $window.location.href = 'index.html';
    }).error(function (err) {
        console.log(err);
    });
};
});

但是，当我提交表单时，JSON标头不包含日期字段。它包含所有其他字段，但不包含日期字段。换句话说，当我提交表单时，非数据将进入数据库。在做了一些研究后，我觉得这与datepicker的绑定有关。我已经提到了下面的帖子并尝试了建议的解决方案，但它没有明确的答案，所以我可能做错了。

how to bind Bootstrap-datepicker element with angularjs ng-model?

非常感谢任何帮助。谢谢。

Answer 1

您的案例中的问题是

 var data = {
                name: $scope.tournamentName,
                location: $scope.location,
                status: $scope.status,
                description: $scope.description,
                startDate: $scope.startDate,
                endDate: $scope.endDate             
            };

startDate位于数据中。所以我建议你在控制器

中添加之前数据声明

$scope.startDate="";
$scope.endDate ="";

相反，Angular UI Bootstrap可以使您的工作变得简单LINK

使用此

<强> HTML

<p class="input-group">
          <input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>
        </p>

将此添加到您的控制器

 $scope.dt = new Date();

Answer 2

为了更好地创建一个指令，因为你设置的值并没有反映在ng-model中，因为它超出了范围，所以为此你可以 / * 在您的应用中注入模块，例如angular.module（＆＃39; App＆＃39;，[＆＃39; cjqDatepickerModule＆＃39;]）然后在html中使用它 * /

  <div cjq-datepicker dateformat="dd-mm-yy"></div>
  angular.module('cjqDatepickerModule', []).directive('cjqDatepicker', function() {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        var config = {};
        if(angular.isDefined(attrs.dateformat)){ config.dateFormat = attrs.dateformat;}
        if(angular.isDefined(attrs.mindate)){ config.minDate = attrs.mindate;}
        if(angular.isDefined(attrs.maxdate)){ config.maxDate = attrs.maxdate;}
        if(angular.isDefined(attrs.changemonth)) {config.changeMonth = true;}
        if(angular.isDefined(attrs.changeyear)) {config.changeYear=true;}


        config.onClose = function(selected,jqueryDateInstance){
          var expression = attrs.ngModel + " = " + "'" + selected + "'";
          scope.$apply(expression);
        };
        $(element).datepicker(config);
      }
    };
  });

如何使用角度ng模型绑定Datepicker

2 个答案: