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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Buy Books Online at Best Prices

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.