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.

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.

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.

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.