AngularJs Http delete services

The $http.DELETE() is used to delete the delete a resource on the server to the given specific URL.
The examples as,
//The AngularJs code sample
var app = angular.module('myServiceApp', []);
 app.controller('myServiceCtrl', function ($scope) {
       $scope.lblMsg = null; //default

       $scope.users = [{
                name: "Anil Singh",
                email: '[email protected]'
            }, {
                name: "Dilip Singh",
                email: '[email protected]'
            }];

       $scope.deleteRow = function (id) {
                var data = {
                    Id: id
                };
 //Call the delete services
  $http.delete('htpp://localhost:8080/api/users/delete', JSON.stringify(data)).then(function (rest, status) {
      if (status) {
             if (rest.data)
               $scope.lblMsg = "Delete row submit successfully!";
             } else {
                  $scope.lblMsg = "faild to delete!";
             }
     });
  };
});

//The HTML code-sample
<div ng-app="myServiceApp">
    <div ng-controller="myServiceCtrl">
        <div ng-repeat="row in users">
            <div>{{row.name}} | {{row.email}}</div>
            <a href="#" ng-click="deleteRow($index)">Delete</a>
            <br> Output Message : {{ $scope.lblMsg}}
        </div>
    </div>
</div>

//The Full Live demo code-sample(HTML + Angular)
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Processing $http.delete() response in service</title>
    <script src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script>
        var app = angular.module('myServiceApp', []);

        app.controller('myServiceCtrl', function ($scope) {
            $scope.lblMsg = null; //default
            $scope.users = [{
                name: "Anil Singh",
                email: '[email protected]'
            }, {
                name: "Dilip Singh",
                email: '[email protected]'
            }];

            $scope.deleteRow = function (id) {
                var data = {
                    Id: id
                };
                alert(JSON.stringify(id));
                //Call the delete services
                $http.delete('htpp://localhost:8080/api/users/delete', JSON.stringify(data)).then(function (rest, status) {
                    if (status) {
                        if (rest.data)
                            $scope.lblMsg = "Delete row submit successfully!";
                    } else {
                        $scope.lblMsg = "faild to delete!";
                    }
                });
            };
        });
    </script>
</head>
<body ng-app="myServiceApp">
    <div ng-controller="myServiceCtrl">
        <div ng-repeat="row in users">
            <div>{{row.name}} | {{row.email}}</div>
            <a href="#" ng-click="deleteRow($index)">Delete</a>
            <br> Output Message : {{ $scope.lblMsg}}
        </div>
    </div>
</body>
</html>
The live output,

About Blogger

ANIL SINGH

Hey! I am Anil Singh. I am Active Blogger, Writer and Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
http://www.code-sample.com
http://www.code-sample.xyz

    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment

SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book