Reputation: 417

Angularjs:http post is not working

I am designing the simple page which will take the start and end date from the user,validate it and post it.

Below is my HTML code,

<body>
   <div ng-app="appTable">
      <div ng-controller="Allocation">
         Select start date:
         <input type="text"
            datepicker
            ng-model="start_date" />
         <br>
         <br>
         Select end date:
         <input type="text"
            datepicker
            ng-model="end_date" />
         <br>
         <br>
         <button ng-click="Submit()"> Submit </button> 
         {{msg}}
         {{test1}}
         {{test2}}
      </div>
   </div>
</body>

Below is the aj script:

   <script>
    var app = angular.module("appTable", []);

    app.controller("Allocation", function($scope) {
        $scope.start_date = "2017-05-01";
        $scope.end_date = "2017-05-19";


        $scope.Submit = function() {
            var start = new Date($scope.start_date);
            var end = new Date($scope.end_date);

            if (start > end) {
                $scope.msg = "Start date must be less than the end date."
            } else {
                $scope.msg = "";
                $scope.test = "";
                $scope.postData($scope.start_date, $scope.end_date);

            }


        };
        $scope.postData = function(s_date, e_date) {


            var data = {
                s_date: s_date,
                e_date: e_date,


            };
            $scope.test1 = "Post called 1";
            $http.post('/view_status/', data).then(function(response) {
                $scope.test2 = "Post called 2";
                if (response.data)
                    $scope.msg = "Post Data Submitted Successfully!";
            }, function(response) {
                $scope.msg = "Service not Exists";
                $scope.statusval = response.status;
                $scope.statustext = response.statusText;
                $scope.headers = response.headers();
            });
        };


    });

    app.directive("datepicker", function() {

        function link(scope, element, attrs, controller) {
            // CALL THE "datepicker()" METHOD USING THE "element" OBJECT.
            element.datepicker({
                onSelect: function(dt) {
                    scope.$apply(function() {
                        // UPDATE THE VIEW VALUE WITH THE SELECTED DATE.
                        controller.$setViewValue(dt);

                    });
                },
                dateFormat: "yy-mm-dd" // SET THE FORMAT.
            });
        }

        return {
            require: 'ngModel',
            link: link
        };
    });
</script>

For the debugging purpose I have taken the 2 flags test1,test2 which will print the message before and after the call of the POST service. Flag test1 is printing the message but test2,msg are not printing anything. Please help if I am missing something.

Upvotes: 1