CRUD Operations on JSON object using AngularJs
AngularJS is a powerful JavaScript Framework. It is used in Single Page Application (SPA) projects. It extends HTML DOM with additional attributes and makes it more responsive to user actions. AngularJS is open source, completely free, and used by thousands of developers around the world. In this post we are going to see the code for how we can perform CRUD (Create, Read, Update, Delete) operations on JSON object.
<!doctype html><html> <head> <title>CRUD OPERATIONS</title> <script src = "../js/angular.js"></script> <script> var myApp = angular.module("myapp", []); myApp.controller("tableController", function ($scope) { $scope.dataset = [{name: "shubham", email: "shubham@example.com"}, {name: "sagar", email: "sagar@example.com"} ]; $scope.newname = "test"; $scope.newemail = "test@example.com"; $scope.deleteme = function (i) { $scope.dataset.splice(i, 1); }; $scope.addnewitem = function () { $scope.addnewform = false; $scope.dataset.push({name: $scope.newname, email: $scope.newemail}); }; //$scope.helloTo.title = "AngularJS"; }); </script> </head> <body ng-app = "myapp" > <div ng-controller = "tableController" > <pre>dataset = {{dataset| json}}</pre> <input type="text" ng-model="searchKeyword"/><button>Search</button> <br/><br/><br/> <table border="1"> <tr> <th>Sr.No</th> <th>Name</th> <th>Email</th> <th>Operations</th> </tr> <tr ng-repeat= "detail in dataset| filter: searchKeyword"> <td>{{$index}}</td> <td><input type="text" ng-model="detail.name"/></td> <td><input type="email" ng-model="detail.email"/></td> <td><button ng-click="deleteme($index)">Delete</button></td> </tr> </table> <br/><br/> <button ng-click="addnewform = true">Add New Entry</button> <br/><br/> <form name="addnewentryform" ng-show="addnewform" novalidate> <input ng-model="newname" name="newname" placeholder="enter name" type="text" required/> <span style = "color:red" ng-show = "addnewentryform.newname.$dirty && addnewentryform.newname.$invalid"> <span ng-show = "addnewentryform.newname.$error.required">Name is required.</span> </span> <input name="newemail" ng-model="newemail" placeholder="enter email" type="email" required/> <span style = "color:red" ng-show = "addnewentryform.newemail.$dirty && addnewentryform.newemail.$invalid"> <span ng-show = "addnewentryform.newemail.$error.required"> Valid Email is required.</span> </span> <button ng-disabled = "addnewentryform.newname.$dirty && addnewentryform.newname.$invalid || addnewentryform.newemail.$dirty && addnewentryform.newemail.$invalid" ng-click="addnewitem()">Save</button> </form> </div> </body></html>
Comments
Post a Comment