Creating simple inline editing with AngularJS
Inline editing is the tool which is required by us most of the time in almost all of our applications. Now-a-days with modern web technologies no one wants different pages for display and edit contents like earlier we had viewprofileand editprofile pages. It gives an amazing user experience when the user wants to edit some content and upon his click the display content instantly changes to the editable one and it can be saved and refreshed instantly without being going to a different page.
In this tutorial we will learn about creating an inline editing system using AngularJS. Here I assume you have the basic knowledge of AngularJS.
Basic Idea
Let’s have a basic idea what we are going to do first.
http://blog.shubhamsaxena.com/wp-content/uploads/2015/07/inline.png
Every time the content is loaded I will check if it is set to be displayed or edited and on the basis of this value I will call my script which contains nothing but the HTML for display and edit respectively.
Example
Let us take an example and that will help us understand the situation better.
I have an array of customers, we will list them in a table using ***ng-repeat ***and then add some functions for the inline editing functionality.
Code
Let us first display all the customer using ng-repeat.
<``table class``=``"table table-striped table-bordered"``>
``<``thead``>
``<``th``>Employee Name</``th``>
``<``th``>Employee Email</``th``>
``<``th``>Employee Salary</``th``>
``<``th``>Active</``th``>
``<``th``>Edit</``th``>
``</``thead``>
``<``tbody``>
``<``tr ng-repeat``=``"employee in employees"``>
``<``td``>{{employee.empName}}</``td``>
``<``td``>{{employee.empEmail}}</``td``>
``<``td``>{{employee.empSalary | currency:"₹"}}</``td``>
``<``td``>{{employee.active | active}}</``td``>
``<``td``>
``<``button type``=``"button" class``=``"btn btn-primary"``>Edit</``button``>
``<``button type``=``"button" class``=``"btn btn-danger"``>Delete</``button``>
``</``td``>
``</``tr``>
``</``tbody``>
<``table``>
Here employees is array of employee data and we are iterating to each **employee **using ng-repeat directive. This is a simple use of ng-repeat, we will modify it according to our needs to build an in-line editing system, but first lets have a look how does it look.
http://blog.shubhamsaxena.com/wp-content/uploads/2015/07/table-view.png
Here I have two buttons edit and **delete, **delete will simply delete the entry from the database using HTTP request our main focus here is on edit button which will turn this display mode to editing. Let us move ahead and make some changes to the code in order to make it functional.
The first change we will make is add*** ng-include ***directive which will call a function ***getTemplate() ***and this function will take a parameter which is nothing but a single employee from employees array.
<tr ng-repeat="employee in employees" ng-include="getTemplate(employee)"> |
getTemplate() is very simple and will check is the employee passed in the parameter is set to be displayed or edit and accordingly we will call a script of the html content.
$scope.getTemplate = function (employee) {
if (employee.empID === $scope.selected.empID){
return 'edit';
}
else return 'display';
}; |
As you can see the above code is very simple, the thing which might confuse you is the if condition here. Let me make it more clear here ***employee ***is the value passed as a parameter and ***$scope.selected ***is an JSON object which will hold the employee data upon being selected to edit, and is initially set to null.
$scope.selected = {}; |
So lets have a look to the function which is called on clicking the edit button and what happens to this$scope.selected object.
$scope.editEmployee = function (employee) {
$scope.selected = angular.copy(employee);
}; |
Here I have made use of anuglar function copy which will copy the contents from one to another and here we are copying the contents of the parameter passed(employee) to ***$scope.selected ***object, so now the ***$scope.selected ***object is not null and the ***getTemplate() ***function returns ***edit ***for one employee which will call the edit script instead of display script.
http://blog.shubhamsaxena.com/wp-content/uploads/2015/07/edit.png
I have mentioned a couple of times now that we will call different scripts for edit and display, so lets have a look at how these scripts look. Below is the full code for the HTML part.
<table class="table table-striped table-bordered">
<thead>
<th>Employee Name</th>
<th>Employee Email</th>
<th>Employee Salary</th>
<th>Active</th>
<th>Edit</th>
</thead>
<tbody>
<tr ng-repeat="employee in employees" ng-include="getTemplate(employee)">
<script type="text/ng-template" id="display">
<td>{{employee.empName}}</td>
<td>{{employee.empEmail}}</td>
<td>{{employee.empSalary | currency:"₹"}}</td>
<td>{{employee.active | active}}</td>
<td>
<button type="button" class="btn btn-primary" ng-click="editEmployee(employee)">Edit</button>
<button type="button" class="btn btn-danger" ng-click="deleteEmployee(employee)">Delete</button>
</td>
</script>
<script type="text/ng-template" id="edit">
<td><input type="text" ng-model=employee.empName class="form-control input-sm"/></td>
<td><input type="text" ng-model=employee.empEmail class="form-control input-sm"/></td>
<td><input type="text" ng-model=employee.empSalary class="form-control input-sm"/></td>
<td>
<select class="form-control input-sm" ng-model=employee.active>
<option value='1'>Yes</option>
<option value='0'>No</option>
</select>
</td>
<td>
<button type="button" class="btn btn-primary" ng-click="updateEmployee(employee)">Save</button>
<button type="button" class="btn btn-danger" ng-click="reset()">Cancel</button>
</td>
</script>
</tr>
</tbody>
<table> |
Above code doesn’t have much changes to it, we have simply added two script tags and given them unique***id ***display and edit, so the value we return from the ***getTemplate() ***is the actually the ***id ***of the script which we will call and the contents of that script will be displayed.
Let us see how the screen looks when we click on edit button.
http://blog.shubhamsaxena.com/wp-content/uploads/2015/07/edit-table.png
Again you can see two buttons, save and cancel. Save button will save the changes which can be achieved by making an HTTP request to the database and cancel button should cancel the changes. As we know a particular employee is editable because it exists in ***$scope.selected ***so upon cancel we can clear the $scope.selected object.
$scope.reset = function () {
$scope.selected = {};
}; |
All Done http://blog.shubhamsaxena.com/wp-includes/images/smilies/simple-smile.png Hope you enjoyed it.
This is how you can create a simple in-line editing system, for a live demo of this you can view my recorded webinar of the same.
Source Code – inline-editing-in-ng