AngularJS In-line Application

One of the tools that is extremely crucial in most of our applications is the inline wditing tool. With the modern web technologies now-a-days, no one wants multiple web pages to see ad edit their content. The user experience is vastly improved by the inline editing tools available in modern web pages. This tutorial shows how to create an inline editing system using AngularJS.

Suppose, we have an array of customers; first we prepare a table using ng-repeat directive and then add functions to obtain inline editing. The following table shows how to prepare the table.

The table looks something like this.

In-line Application

Table using ng-repeat

There are two buttons in the table, namely edit and delete. We are concerned with the edit button that will turn the display into editing mode. Now we have to make the following changes in the code to make it functional.

Firstly, we add an ng-include directive to call the function getTemplate() with a single employee as the parameter.

getTemplate() will simply check if the employee that is passed to it is to be displayed or edited, and accordingly will make a call to a script of the HTML content.

The Custom Directive- "ngFiles"

To get the values ew use the $parse service in AngularJS. A $parse takes an expression and returns a function and our link option. Moreover, it needs a function to return. The parsed function onChange will have two parameters. The first parameter is the scope and the second will add the files details in $files variable through the event object.

The Controller

Using getTheFiles() function, the files in the controller can be accessed. The parameter $file provides details of the file. The change callback in the directive triggers this development.

After obtaining all the details, we run a loop using angular.forEach() to extract each file and save it in a FormData() object. To provide data to the $http service, the FormData object is used where data property is used.

Next ConceptNav Menu