CODEWITHSUNDEEP
angularjs
Anjali Srivastava
Anjali Srivastava

Reputation: 31

After injecting $http, code is not displaying the table in angular.js

I am a beginner in anular.js. I'm trying to write a code which add and removes rows in a table on button click and once done ad user clicks on createdelivery button I want to send the data as a JSON object to server.

But when am injecting $http as follows,

var app = angular.module("createDelivery", []);
app.controller("MyController", ['$scope', 'http', function($scope, $http)

it doesn't create the table also.

Please help me to solve the issue.

<html>
  <head>

    <title>Add Rows</title>


    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <script>
    var app = angular.module("createDelivery", []);
    app.controller("MyController", ['$scope', 'http', function($scope, $http) {
        $scope.deliveryDetails = [
            {
                'fname':'Muhammed',
                'lname':'Shanid',
                'email':'[email protected]'
            },

            {
                'fname':'Roy',
                'lname':'Mathew',
                'email':'[email protected]'
            }];

            $scope.addNew = function(cdDetails){
                $scope.deliveryDetails.push({ 
                    'fname': "", 
                    'lname': "",
                    'email': "",
                });
            };

            $scope.remove = function(){
                var newDataList=[];
                $scope.selectedAll = false;
                angular.forEach($scope.deliveryDetails, function(selected){
                    if(!selected.selected){
                        newDataList.push(selected);
                    }
                }); 
                $scope.deliveryDetails = newDataList;
            };

        $scope.checkAll = function () {
            if (!$scope.selectedAll) {
                $scope.selectedAll = true;
            } else {
                $scope.selectedAll = false;
            }
            angular.forEach($scope.deliveryDetails, function(cdDetails) {
                cdDetails.selected = $scope.selectedAll;
            });
        };    
        $scope.getData = function(cdDetails) 
        {
                alert("Check");
                var jsonString;
                jsonString = angular.toJson(cdDetails);
                //JSON.stringify(jsonString);                               
                $http
                    ({
                        url: "/scheduler/createDelivery",
                        dataType: 'json',
                        method: 'POST',
                        data: jsonString

                    }).success(function(response) {
                        alert("success : : "+jsonString);
                        $scope.value = response;
                    }).error(function(error) {
                        alert("error::"+error);
                    });

                //window.location.reload();  
                //document.write("\nString value "+jsonString);                 
        };  

    }]);
    </script>
  </head>

  <body ng-app="createDelivery" ng-controller="MyController">     
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <form ng-submit="addNew()">
                            <table class="table table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" /></th>
                                        <th>Firstname</th>
                                        <th>Lastname</th>
                                        <th>Email</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr ng-repeat="cdDetails in deliveryDetails">
                                        <td>
                                            <input type="checkbox" ng-model="cdDetails.selected"/></td>
                                        <td>
                                            <input type="text" class="form-control" ng-model="cdDetails.fname" required/></td>
                                        <td>
                                            <input type="text" class="form-control" ng-model="cdDetails.lname" required/></td>
                                        <td>
                                            <input type="email" class="form-control" ng-model="cdDetails.email" required/></td>
                                    </tr>
                                </tbody>
                            </table>

                            <div class="form-group">
                                <input ng-hide="!deliveryDetails.length" type="button" class="btn btn-danger pull-right" ng-click="remove()" value="Remove">
                                <input type="submit" class="btn btn-primary addnew pull-right" value="Add New">
                                 <button type="button" name = "createDelivery"class="col-sm-2 btn btn-primary" style="width:25%" ng-click="getData(cdDetails);">Create Delivery</button>

                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Upvotes: 3

Views: 43

Answers (1)

Ranjith V
Ranjith V

Reputation: 134

 app.controller("MyController", ['$scope', 'http'

One mistake in code is above. Change it and try. you must inject $http

Upvotes: 1

Related Questions