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 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
- addEmployee
Download TableForm Edit Code
3 thoughts on “AngularJS Table Form Edit Tutorial”
Comments are closed.
how i can send data to mysql with php
please
how i can send data to mysql with php to use angular js
What if “Add Employee” can be divided by department and a new table for display using one controller. Then the two table with different controller, the existing one would be Dept1 and the new one is the Dept2.