AngularJs CRUD Operations demo example

AngularJs CRUD Operations demo example

The CRUD Operations demo link http://embed.plnkr.co/LvSysN/

The example in detail as given below

<!doctype html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script>
        var app = angular.module('empApp', []);

        app.controller('empCtrl', ['$scope', function ($scope) {

            //Employee collection for render grid.
            $scope.employee = [{
                id: 1,
                name: 'Anil Singh',
                age: 30,
                web: 'www.code-sample.com'
            }, {
                id: 2,
                name: 'Sunil Singh',
                age: 25,
                web: 'www.code-sample.com'
            }, {
                id: 3,
                name: 'Sushil',
                age: 20,
                web: 'www.code-sample.com'
            }, {
                id: 4,
                name: 'Aradhya',
                age: 2,
                web: 'www.code-sample.com'
            }, {
                id: 5,
                name: 'Reena',
                age: 25,
                web: 'www.code-sample.com'
            }];

            //Delete Row
            $scope.delete = function (index) {
                $scope.employee.splice(index, 1);
                //TODO: Login for server call and remove data;
            }

            //Update Row
            $scope.update = function (index, data) {
                alert(JSON.stringify(data));
                //TODO: logic to render data on popups and update and set;
            }

            //Copy new Row
            $scope.copy = function (index, data) {
                var newRow = angular.copy(data);
                $scope.employee.push(newRow);
                //TODO: Logic for add new rows.
            }
        }]);
    </script>
</head>
<body ng-app="empApp" ng-controller="empCtrl">
    <div>
        <h1>Employees</h1>
    </div>
    <div>
        <h3>Id : Name : Age : Web</h3>
    </div>
    <div ng-repeat="emp in employee">
        <div>
            {{emp.id}} : {{emp.name}} : : {{emp.age}} : : {{emp.web}}
            <input type="button" value="Update" data-ng-click="update($index, emp)" />
            <input type="button" value="Copy" data-ng-click="copy($index, emp)" />
            <input type="button" value="delete" data-ng-click="delete($index)" />
        </div>
    </div>
</body>
</html>

The output look like http://embed.plnkr.co/LvSysN/


ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

AngularJs CRUD Operations demo example AngularJs CRUD Operations demo example Reviewed by Anil Singh on 12:30 PM Rating: (5)
www.code-sample.com/. Powered by Blogger.
^