Creating Simple Inline Editing With AngularJS

Introduction

Inline editing is the tool we often need in nearly all of our applications. These days with modern web technologies no one wants multiple pages for displaying and editing contents, like earlier we had viewprofile and 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 an editable one and it can be saved and refreshed instantly without going to another page.

This tutorial explains the creation of an inline editing system using AngularJs. Here I assume you have the basic knowledge of AngularJs.

Basic Idea

Let's have a basic idea of what we will do first.

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 that contains nothing but the HTML for display and edit respectively.

Example

Let us see an example 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 customers 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 an array of employee data and we are iterating each employee using ng-repeat directive. This is a simple use of ng-repeat, we will modify it depending on our needs to build an in-line editing system, but first let's have a look at how it looks.



Table using ng-repeat

Here I have two buttons, edit and delete. The delete button will simply delete the entry from the database using a HTTP request. Our main focus here is on the edit button that will turn this display mode onto an editing mode. Let us proceed and make some changes to the code to make it functional.

The first change we will make is to add a ng-include directive that will call a function getTemplate() and this function will take a parameter that is nothing but a single employee from the employees array.

   <tr ng-repeat="employee in employees" ng-include="getTemplate(employee)">

getTemplate() is very simple and will check if the employee passed in the parameter is set to be displayed or editeed 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 preceding code is very simple. The thing that 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 a JSON object that will hold the employee data upon being selected to edit and is initially set to null.

$scope.selected = {};

So let's have a look at the function that is called on the 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 Angular function to copy and that 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 that will call the edit script instead of display script.



Edit functionality

I have said a couple of times now that we will call various scripts for edit and display, so let's have a look at how these scripts look. The following is the complete 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>

The preceding code doesn't many much changes to it, we have simply added two script tags and given them a unique id display and edit, so the value we return from the getTemplate() is the actually the id of the script that we will call and the contents of that script will be displayed.

Let us see how the screen looks when we click on the edit button.



Edit mode table

Again you can see two buttons, save and cancel. The Save button will save the changes that can be done by making an HTTP request to the database and the cancel button should cancel the changes. As we know, a specific employee is editable because it exists in $scope.selected so upon cancel we can clear the $scope.selected object.

$scope.reset = function () {
   $scope.selected = {};
};

This is how you can create a simple in-line editing system, for a live demo of this you can view the recorded webinar here: