In the previous two articles, we have learnt about basics of AngularJS, its project setup and bootstrap styling.

Please have a look on my previous articles.

Angular, Bootstrap And ASP.NET MVC – Part One

Angular, Bootstrap And ASP.NET MVC – Part Two

In this article, we are going to learn data binding in AngularJS. We learn how data is set into the form and how data is get from the form. In AngularJS, data is stored in “$scope” variable in the controller. This is a model, we can access the data from this variable in HTML.

For example:

In controller, we set value “Kishor” in “name” variable,

Then in HTML, we can get this data like:

OR,

In AngularJS, data binding can be done using different ways:

  1. $scope: Binding part between the HTML (view) and the JavaScript (controller). $scope is an object with the available properties and methods. Available for both view and controller.
  2. ng-model: Binds value of HTML control to application data or bind application data to HTML controls (inputs, text-area, lists, etc.). Facilitates 2-way binding.

Step 1:

In “efTemplate.html”, we are going to bind data in HTML using “ng-model”.

This is our initial input field without binding.

Now let’s put ng-model attribute in this input field:

Similarly, we can use ng-model for textarea like:

For “select” control also, we can use “ng-model” like:

For “checkbox” control, we can use ng-model like:

For “radio-button” controls, each “ng-model” attribute should be set with same “student.gendersince angular compares gender with the value. If gender value is Male, then “Male” radio-button is checked. If gender value is Female, then “Female” radio-button is checked.

Step 2:

Now in the “sfService.js”, updated code will be as:

 

Run the application, you will see the following output. In the controller, in object “student”, we have set data that we get from “sfService.js” as:

$scope.student = sfService.student;

Step 3:

Now we are going to bind data in “select” tag without hard-coding in HTML. Right now, we have hard-coded list of departments in select control.

ng-options” is used to bind list in select control in html. Let’s put the list inside the controller as “$scope.departments”:

 

And in the “sfTemplate.html” update select control as:

 

Here 2-way data binding is set up since we still have ng-model in select control and so its value is set to “Physics” from the list of departments.

Run the application, same output will be seen as before. All the department lists are bind into the select control as before.

Step 4:

Submitting a Form:

We can submit our form in different ways:

  • ng-submit: It is placed on form tag and specify a function as ng-submit = ”submitForm()”
  • ng-click: It is placed on the submit button and specify function as ng-click = “submitForm()” and in controller $scope. submitForm = function{ … }

Let’s add ng-submit in form tag in sfTemplate.html as :

 

And in “sfController.js” add the “submitForm()” function as:

 

Step 5:

Run the application and press submit button, you will see an alert.

Complete HTML code for “sfTemplate.html” is:

 

Get the complete project from GitHub.

We will continue more in next articles. Keep you posted.

Thanks, Happy Coding!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">