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 Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.