AngularJS Table Form Edit Tutorial

In this tutorial, we will see custom table edit and it will be useful for applications it required single edit for list.

As shown in below, It displays JSON list data of employees  using ng-repeat directive. Initially all records are displayed in disabled format and provides below functionalities:

  •  Add Employee :  It adds empty and a new editable record to the table list
  •  Edit :  Enables selected  employee row to edit
  •  Delete: Deletes selected row

AngularJS Table List Edit

AngularJS versions and dependencies:

  • angular.min.js – 1.6.2
  • bootstrap.css
  • jQuery
  • bootstrap.js

Tutorial Code:

  • index.html
    • This file is binded with ng-app =”MyApp” and controller=”MainController”
    • It displays the employee records which are binded in MainController using ng-repeat
    • It defines button:
      • addEmployee
      • editEmployee
      • deleteEmployee
    • <html>
      <head>
       <link rel="stylesheet" href="css/bootstrap.min.css">
       <title>Angular Custom Table Edit</title>
       <style>
       #mytable input{
       width:100%;
       }
      </style>
      </head>
      <body ng-app="myApp" ng-controller="MainController">
        <h1 align="center" style="color:#428bca">Custom Table Edit </h1>
      <div class="container">
       <div class="row">
       <button type="button" style="float:right;margin-bottom: 10px;" class="btn btn-info " ng-click="addEmployee()">Add Employee</button>
       <div class="col-md-12">
       <div class="table-responsive">
            <form id="empform" ng-submit="submitEmployee()">
                <table id="mytable" class="table table-bordered">
                    <thead>
                       <th style="width:5%;">SNO</th>
                        <th style="width:10%;">Emp#</th>
                        <th style="width:15%;">Email</th>
                        <th style="width:10%;">First Name</th>
                        <th style="width:10%;">Last Name</th>
                        <th style="width:15%;">Desginatin</th>
                        <th style="width:15%;">Project Name</th>
                        <th style="width:25%;">Actions</th> 
                       </thead>
                  <tbody>
                      <tr ng-repeat="emp in empoyees">
                         <td>{{$index+1}}</td>
                         <td><input name="empId{{$index}}" ng-model="emp.empId"  ng-disabled="!enabledEdit[{{$index}}]"/> </td>
                         <td><input name="email{{$index}}" ng-model="emp.email" ng-disabled="!enabledEdit[{{$index}}]" /> </td>
                          <td><input name="firstName{{$index}}" ng-model="emp.firstName" ng-disabled="!enabledEdit[{{$index}}]"/></td>
                          <td><input name="lastName{{$index}}" ng-model="emp.lastName" ng-disabled="!enabledEdit[{{$index}}]"</td>
                          <td><input name="designation{{$index}}" ng-model="emp.designation" ng-disabled="!enabledEdit[{{$index}}]"/></td>
                          <td><input name="project{{$index}}" ng-model="emp.project" ng-disabled="!enabledEdit[{{$index}}]"/></td>
                           <td >
                               <div class="buttons">
                                    <button class="btn btn-primary" ng-click="editEmployee($index)">Edit</button>
                                    <button class="btn btn-danger" ng-click="deleteEmployee($index)">Delete</button>
                               </div> 
                           </td>
                        </tr>
               </tbody>
           </table>
          <input type="submit" class="btn btn-primary" value="Submit" />
       </form>
       <div class="clearfix"></div>
       </div>
       </div>
        </div>
       </body>
       <script src="js/jquery.js"></script>
       <script src="js/bootstrap.min.js"></script>
       <script src="js/angular.min.js"></script>
       <script type="text/javascript" src="js/app.js"></script>
       </html>
  • app.js
    • Defines MainController and gets employee data.
    • At line #13,  We will make the new copy of data and assigns to $scope.employee
    • $scope.enableEdit is empty array and will be used to enable editing employee record
    • This defines the following functions which are binded at index.html using ng-click
      • addEmployee
        • Just create empty empoyee record and push the employess list
        • This will automatically refreses the data on UI with angular twoway binding
      • editEmployee
        • This will set enableEdit array to true
        • This field will be used on html with ng-diabled directed to enable/disable input field
      • deleteEmployee
        Table Form Edit Example

 

Download TableForm Edit Code

 

1 Comment

  1. Mehdi Amine

    how i can send data to mysql with php
    please

    Reply

Leave a Comment

Your email address will not be published. Required fields are marked *