ADD, UPDATE AND REMOVE ROW FROM TABLE USING ANGULARJS IN MVC

Parismita panda
In this post, I will show how to add, Update and Remove a row in a table using Angular JS. It is very easy to add or edit row in AngularJS table.

First give the value of $scope.Equipment=[]; in your script page load of angular controller.

Format for adding row in AngularJS Table is:

$scope.Equipment.push({Your row data});


Format for updating row in AngularJS Table is:

$scope.Equipment[index] = angular.copy({Changed Row Data});


Format for Removing row in AngularJS Table is:

$scope.Equipment.splice(index, 1);


I am taking an example for describing above format, That means how to implement above format in my mvc application using AngularJS.

Example:

1.Create a View Page:

Write following code in your Page:

Required References:

Write this below reference in your <head> tag.

     <link href="~/Content/bootstrap.css" rel="stylesheet" />
     <script src="~/Scripts/bootstrap.min.js"></script>
     <script src="~/Scripts/jquery-1.10.2.min.js"></script>
     <script src="~/Scripts/1.5.5_angular.js"></script>  //Angular JS reference
   
Write this below html code in your <body> tag.

 <div id="contentBody" data-ng-app="mvcapp" data-ng-controller="requestcontroller">
 <input type="hidden" id="hdnid" />
 <div class="row">
    <div class="col-md-3">
        <label>Equipment Type :</label>
    </div>
    <div class="col-md-3">
        <label>Equipment Name :</label>
    </div>
    <div class="col-md-3">
        <label>Unit :</label>
    </div>
    <div class="col-md-3">
        <label>Quantity :</label>
    </div>
    </div>
    <div class="row">
    <div class="col-md-3">
        <input type="text" class="form-control" id="txtequipmenttype" />
    </div>
    <div class="col-md-3">
        <input type="text" class="form-control" id="txtequipmentname" />       
    </div>
    <div class="col-md-3">     
       <input type="text" class="form-control" id="txtunit" /> 
    </div>
    <div class="col-md-3">
       <input type="text" class="form-control" id="txtquantity" />
    </div>
    </div>
    <div class="form-group" style="text-align:center;">
    <button id="btnadd" class="btn btn-primary" data-ng-click="AddEquipments()">Add</button>
    <button id="btnupdate" class="btn btn-primary" data-ng-click="UpdateEquipments()">Update</button>
    </div>
    <div class="clearfix" style="margin-bottom:5px;"></div>
    <div class="row">
    <table id="tblmaterials" class="table table-bordered">
     <thead>
     <tr>
      <td>Equipment Type</td>
      <td>Equipment Name</td>
      <td>Unit</td>
      <td>Quantity</td>
      <td>Action</td>
     </tr>
     </thead>
     <tbody>
     <tr data-ng-repeat="y in Equipment">
      <td>{{y.EQUIPMENT_TYPE}}</td>
      <td>{{y.EQUIPMENT_NAME}}</td>
      <td>{{y.UNIT_NAME}}</td>
      <td>{{y.QUANTITY}}</td>
      <td><a href="#" data-ng-click="Editequipments(y)">Edit</a>&nbsp;&nbsp;<a href="#" data-ng-click="Removeequipments(y)">Remove</a></td>
     </tr>
     </tbody>
    </table>
    </div>
</div>



 2. Write Script for add, Update and remove row from table:

     <script>

        var aap = angular.module('mvcapp', []);
        aap.filter('jsonDate', ['$filter', function ($filter) {
            return function (input, format) {
                return (input)
                ? $filter('date')(parseInt(input.substr(6)), format)
                : '';
            };
        }]);
        aap.controller("requestcontroller", function ($scope, $http, $element, $filter) {
            debugger;
             $scope.Equipment=[]; //Here we define the value of Equipment is null
             $('#btnupdate').hide();
             $('#btnadd').show();

              // Add Row to the Table
             $scope.AddEquipments = function () {
               $scope.Equipment.push({
                    SL_NO: $scope.Equipment.length + 1,                 
                    EQUIPMENT_TYPE: $('#txtequipmenttype').val(),                 
                    EQUIPMENT_NAME: $('#txtequipmentname').val(),                 
                    UNIT_NAME: $('#txtunit').val(),
                    QUANTITY: $('#txtquantity').val()
                });
               $('#txtequipmenttype').val('');
               $('#txtequipmentname').val('');
               $('#txtunit').val('');
               $('#txtquantity').val('');
             }

             //Retrieve Data from Table
             $scope.Editequipments = function (y) {             
               $('#txtequipmenttype').val(y.EQUIPMENT_TYPE);
               $('#txtequipmentname').val(y.EQUIPMENT_NAME);
               $('#txtunit').val(y.UNIT_NAME);
               $('#txtquantity').val(y.QUANTITY);
               $('#hdnid').val(y.SL_NO);
               $('#btnupdate').show();
               $('#btnadd').hide();
             }

             //Remove Data from Table
             $scope.Removeequipments = function (y) {             
                var index = -1;
             
                for (var i = 0; i < $scope.Equipment.length; i++) {
                    if ($scope.Equipment[i].SL_NO == y.SL_NO) {
                        index = $scope.Equipment.indexOf($scope.Equipment[i]);                     
                    }                 
                }
                if(index !=-1)
                {
                   $scope.Equipment.splice(index, 1);
                }
             }

             //Update Data for Table
            $scope.UpdateEquipments = function () {                   
                for (var i = 0; i < $scope.Equipment.length; i++) {
                   if ($scope.Equipment[i].SL_NO == $('#hdnid').val()) {
                    $scope.Equipment[i]=angular.copy({
                      SL_NO: $('#hdnid').val(),                 
                      EQUIPMENT_TYPE: $('#txtequipmenttype').val(),                 
                      EQUIPMENT_NAME: $('#txtequipmentname').val(),                 
                      UNIT_NAME: $('#txtunit').val(),
                      QUANTITY: $('#txtquantity').val()
                   });
                   }
                }
               $('#txtequipmenttype').val('');
               $('#txtequipmentname').val('');
               $('#txtunit').val('');
               $('#txtquantity').val('');
               $('#btnupdate').hide();
               $('#btnadd').show();
             }

        })

     </script>

In this way we add, update, retrieve and remove row data from table using AngularJS in MVC.
Tags
Reactions

Post a Comment

0 Comments