Designing and coding

Menu

DataBinding in {{AngularJS}} – Part 7

This is the seventh post in the series of AngularJS and today, we will discuss one of the features that we already used – Data Binding in details. For earlier posts of the series, please refer the links below

Broadly, Data binding can be divided in the two parts
– One way binding
– Two way binding

One Way Binding – You must have seen/used One way binding at several times while using different templating mechanism. In a normal scenario, model (can be retrieved some services/database or generated on the fly) and template, is used to render to view. Let’s see it pictorially

From the above image, we can understand that the model and template is using by the rendering engine and corresponding html is generated. This works as one time merging. But what would happen if the underlying data gets changed? Will that reflect on UI in the above scenario? Off course not because it is just one time rendering.

AngularJS provides a true data binding feature that makes sure that model and view are always in sync. It means if the underlying data gets changed, it gets reflected on UI at same time without taking any action. It enables us to allow to focus on data and make it a single source of truth. Angular takes the un-compiled HTML(also called template) which includes all angular attributes, binds it with the model and includes some watcher behind the scene to make sure that you always get live view. If the underlying data gets changes, these watcher notify and accordingly the corresponding the element on UI on changes.

In the above image, even once initially HTML is rendered with the provided data and template, Angular keeps a watch on the model and if it gets updated, it updates the UI accordingly. Let’s see this via an example.

For this demo, I am going to use the same example application that we created in 3rd post of the series. There we had a list of Talks that we displayed using ng-repeat. It was an example of one way binding. I will not explain the example application here. I will advise to go through the earlier post then continue (To view the post, Click here). Here I am going to show you another flavor of One way binding. Let’s see the view (Index.cshtml)

In the above screenshot, I have encircled that I added a button that calls a update method. Now let’s see the definition. It is in EventController.js as

Here I have provided the definition of the update method and just updating name of the first object in this list for this demo. Now let’s run the application

The list of talks contains four object and rendered on browser using one way binding. When we click on UpdateModel button, name in the first row got updated. And I just wrote the code to update the model in the method (not the UI element). So if your model gets updated any how then Angular makes sure that it reflects same on UI. This is the power of AngularJS.

Now, Let’s talk of two way data binding

Two way Data Binding – First, What is Two-way data binding? In simple terms

So first one, itself called as one way data binding that we discussed in my first section of the post. So how does two way binding works

From the above picture, we can understand that Angular makes sure that whenever a model changes, view gets updated and vice-versa. In this flow, controller is not involved at all.

Note- In the above picture, I have not shown that how initially view gets rendered using template.It is same as one way binding

To provide the above features, AngularJS provides another directive call ng-model that should be applied to each element on UI for which we want to use two way binding feature.

Working with Two Way Binding – As I mentioned in above post that to implement two way data binding, a directive ng-model is provided, it makes sure the underlying object gets updated as soon as it gets updated from UI.

I have updated the same example used above. In it, I have added couple of things which includes added a Delete button in each row, now duration column is editable and added a row which show the sum of all the Duration column. So let’s see view

In above code, for duration I have added two columns (td), one contains the value (view Only) and another contains an input control but showing only one td at a time. One new directive, I used in input control – ng-model, it enables two way binding. I added another column which has a delete button which deletes a row. On click of delete button, deleteItem is called which deletes an item from the model. Also I added another row (tr) which show the sum of values of duration column. These new methods are added in the controller. Let’s see it

Here ShowEdit and HideEdit are simple, I am just setting a variable and based on that showing the View only or editable cell in the table. In deleteItem, index of the item is passed and the item is deleted from underlying model. In TotalDuration, I am just adding all the duration from the underlying model and returning it that is shown on TotalDuration row.

let’s see it running

In the above example, we can see when we click the delete button that deletes the row which also updates total row as it depends on the underlying model. Similarly, when we edit a row and change the value to 190, Total Duration again gets changed.

This example is attached with the post.

To navigate to previous and next post of the series, use the links at the bottom of the post.