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>            &nbsp;&nbsp; <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

Popular posts from this blog

MATLAB code for Circular Convolution using Matrix method

Positive number pipe in angular 2+