Thursday, August 27, 2015

Insert Update Delete in Angular Js

Insert Update Delete in Angular Js

In this blog, I’m explaining how to insert, update, delete records in angularjs in an array.

Step 1:

First create an html page named “index.html”


<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Crud In Angular </title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/App/Controller/EmpCtrl.js"></script>
</head>
<body ng-app="Angular.Employee" ng-controller="EmpCtrl">
    <div class="col-xs-8 col-xs-offset-2">
        <h2>Employee Details</h2>
        <table class="table">
            <tr>
                <th>Name</th>
                <th>City</th>
                <th>IsActive</th>
                <th>Actions</th>
            </tr>
            <tr ng-repeat="item in model">
                <td>{{item.Name}}</td>
                <td>{{item.City}}</td>
                <td><input type="checkbox" ng-model="item.IsActive" disabled /></td>
                <td>
                    <button class="btn btn-primary" ng-click="edit(item)">Edit</button>
                    <button class="btn btn-danger" ng-click="delete(item)">Delete</button>
                </td>
            </tr>
            <tr ng-if="showForm">
                <td>
                    <input type="text" placeholder="Name" class="form-control" ng-model="newData.Emp.Name" />
                </td>
                <td>
                    <input type="text" placeholder="City" class="form-control" ng-model="newData.Emp.City" />
                </td>
                <td>
                    <input type="checkbox" ng-model="newData.Emp.IsActive" />
                </td>
                <td>
                    <button type="button" class="btn btn-primary" ng-click="add()">Add</button>
                    <button type="button" class="btn btn-default" ng-click="IsShowForm(false)">Cancel</button>
                </td>
            </tr>
        </table>
        <button type="button" class="btn btn-primary" ng-click="IsShowForm(true)">Add New Record</button>
    </div>
</body>
</html>


 Step 2:

Now create a javascript file named “EmpCtrl.js” and write the below code in it:


angular.module('Angular.Employee', [])
.controller('EmpCtrl', ['$scope', function ($scope) {
    //Array to hold our data
    $scope.model = [];
    //To show/hide the form
    $scope.showForm = false;
    //To be used for new entry or edit an existing entry in an array
    $scope.newData = {
        Emp: {}
    };

    //Method to show/hide th form
    $scope.IsShowForm = function (IsShow) {
        $scope.showForm = IsShow;
        $scope.newData.Emp = {};
    }

    //Method to add a new entry or edit an existing entry in an array
    $scope.add = function () {

        var index = $scope.model.indexOf($scope.newData.Emp);
        if (index == -1) {
            $scope.model.push($scope.newData.Emp);
        }
        else {
            $scope.model[index] = $scope.newData.Emp;
        }
        $scope.showForm = false;
        $scope.newData.Emp = {};
    }

    //Method to fill up the existing entry in the form to be edited
    $scope.edit = function (item) {
        $scope.newData.Emp = item;
        $scope.showForm = true;
    }

    //Method to delete an entry
    $scope.delete = function (item) {
        var index = $scope.model.indexOf(item);
        $scope.model.splice(index, 1);
    }
}]);

Output

Run the application:



Click on Add New Record Button, this will show the form like this:



Now fill the form with appropriate values and click on Add button



This will add the data in the array, and your new entry will show here.



Now add another entry

Now click on edit of record “Mark” , you will see that form is shown up with the values of “Mark” record



Update the data and click on Add button, this will update the record in an array.



Now click on delete button of “Mark” record



This will delete the record.


MY PREVIOUS BLOGS :







No comments:

Post a Comment