Angular

Angular, Bootstrap And ASP.NET MVC - Part Three (Data Binding In AngularJS)

In the previous two articles, we learned about the basics of AngularJS, its project setup, and bootstrap styling. Please have a look at my previous articles.

In this article, we are going to learn data binding in AngularJS. We will 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 model, we can access the data from this variable in HTML.

For example,

In Controller, if the $scope.name = “Kishor, then in HTML, we can set this data like:

<p> {{ name }} </p>

OR, <p ng-bind="name"></p>

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

  1. $scope
    Binding part between the HTML (view) and the JavaScript (controller). $scopeis 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.

  1. <input type="text" id="fullName" name="fullName" class="form-control" />  

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

  1. <input type="text" id="fullName" name="fullName" class="form-control" ng-model="student.fullName"/>  

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

  1. <textarea name="objective" id="objective" class="form-control" rows="5" cols="40" ng-model="student.objective"></textarea>  
For “select” control also, we can use “ng-model” like,
  1. <select name="department" id="department" class="form-control" ng-model="student.department">  
  2.     <option>Math</option>  
  3.     <option>Physics</option>  
  4.     <option>Chemistry</option>  
  5.     <option>English</option>  
  6. </select>  
For “checkbox” control, we can use "ng-model" like:  
  1. <div class="checkbox">  
  2.     <label><input type="checkbox" value="hobbiesTravel" ng-model="student.hobbiesTravel" />Travelling</label>  
  3. </div>  
  4. <div class="checkbox">  
  5.     <label><input type="checkbox" value="hobbiesPhotography"  ng-model="student.hobbiesPhotography"/>Photography</label>  
  6. </div>  
  7. <div class="checkbox">  
  8.     <label><input type="checkbox" value="hobbiesGaming"  ng-model="student.hobbiesGaming"/>Gaming</label>  
  9. </div>  
For “radio-button” controls, each “ng-model” attribute should be set with same “student.gender” since 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.
  1. <div class="radio">  
  2.     <label><input type="radio" name="gender" value="Male" ng-model="student.gender" /> Male</label><br />  
  3. </div>  
  4. <div class="radio">  
  5.     <label><input type="radio" name="gender" value="Female" ng-model="student.gender" /> Female</label><br />  
  6. </div>   
Step 2

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

  1. studentFormsApp.factory('sfService',  
  2.     function () {  
  3.         return {  
  4.             student: {  
  5.                 fullName: "Kishor Bikram Oli",  
  6.                 objective: "To become a great software engineer",  
  7.                 department: "Physics",  
  8.                 hobbiesGaming: true,  
  9.                 hobbiesTravel: false,  
  10.                 hobbiesPhotography: true,  
  11.                 gender: "Male"  
  12.             }  
  13.         }  
  14.     });  

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,

  1. $scope.student = sfService.student;  

AngularJS

Step 3

Now, we are going to bind data in “select” tag without hardcoding in html. Right now, we have hardcoded 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”,

  1. studentFormsApp.controller('sfController',  
  2.     function sfController($scope, sfService) {  
  3.         $scope.student = sfService.student;  
  4.   
  5.         $scope.departments = [  
  6.                "Math",  
  7.                "Physics",  
  8.                "Chemistry",  
  9.                "English"  
  10.         ];  
  11.     });  

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

  1. <select name="department" id="department" class="form-control"   
  2.         ng-model="student.department"  
  3.         ng-options="dept for dept in departments">  
  4. </select>  

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.

  1. <form role="form" class="form-horizontal" ng-submit="submitForm()">  
  2. ……  
  3. </form>  

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

  1. studentFormsApp.controller('sfController',  
  2.     function sfController($scope, sfService) {  
  3.         $scope.student = sfService.student;  
  4.   
  5.         $scope.departments = [  
  6.                "Math",  
  7.                "Physics",  
  8.                "Chemistry",  
  9.                "English"  
  10.         ];  
  11.   
  12.         $scope.submitForm = function () {  
  13.             alert("Form submitted");  
  14.             //AJAX calls, validations, will be covered later.  
  15.         };  
  16.   
  17.     });  

Step 5

Run the application and press Submit button. You will see an alert.

AngularJS

Complete HTML code for “sfTemplate.html” is -

  1. <form role="form" class="form-horizontal" ng-submit="submitForm()">  
  2.     <fieldset>  
  3.         <legend>Basic Information</legend>  
  4.         <div class="form-group">  
  5.             <label for="fullName" class="col-sm-3 control-label">Name</label>  
  6.             <div class="col-sm-9">  
  7.                 <input type="text" id="fullName" name="fullName" class="form-control"   
  8.                        ng-model="student.fullName"/>  
  9.             </div>  
  10.         </div>  
  11.         <div class="form-group">  
  12.             <label for="objective" class="col-sm-3 control-label">Objective</label>  
  13.             <div class="col-sm-9">  
  14.                 <textarea name="objective" id="objective" class="form-control" rows="5" cols="40" ng-model="student.objective"></textarea>  
  15.             </div>  
  16.         </div>  
  17.   
  18.         <div class="form-group">  
  19.             <label for="department" class="col-sm-3 control-label">Department</label>  
  20.             <div class="col-sm-9">  
  21.             <select name="department" id="department" class="form-control"   
  22.                     ng-model="student.department"  
  23.                     ng-options="dept for dept in departments">  
  24.             </select>  
  25.             </div>  
  26.         </div>  
  27.     </fieldset>  
  28.   
  29.     <br />  
  30.   
  31.     <fieldset>  
  32.         <legend>Hobbies</legend>  
  33.         <div class="form-group">  
  34.             <div class="col-sm-3">  
  35.   
  36.             </div>  
  37.             <div class="col-sm-9">  
  38.                 <div class="checkbox">  
  39.                     <label><input type="checkbox" value="hobbiesTravel" ng-model="student.hobbiesTravel" />Travelling</label>  
  40.                 </div>  
  41.                 <div class="checkbox">  
  42.                     <label><input type="checkbox" value="hobbiesPhotography"  ng-model="student.hobbiesPhotography"/>Photography</label>  
  43.                 </div>  
  44.                 <div class="checkbox">  
  45.                     <label><input type="checkbox" value="hobbiesGaming"  ng-model="student.hobbiesGaming"/>Gaming</label>  
  46.                 </div>  
  47.                 <br />  
  48.             </div>  
  49.         </div>  
  50.     </fieldset>  
  51.   
  52.     <fieldset>  
  53.         <legend>Gender</legend>  
  54.         <div class="form-group">  
  55.             <div class="col-sm-3"></div>  
  56.             <div class="col-sm-9">  
  57.                 <div class="radio">  
  58.                     <label><input type="radio" name="gender" value="Male" ng-model="student.gender" /> Male</label><br />  
  59.                 </div>  
  60.                 <div class="radio">  
  61.                     <label><input type="radio" name="gender" value="Female" ng-model="student.gender" /> Female</label><br />  
  62.                 </div>  
  63.                 <br />  
  64.             </div>  
  65.         </div>  
  66.     </fieldset>  
  67.     <input type="submit" class="btn btn-primary col-sm-offset-3" value="Submit" />  
  68. </form>  

Get the complete project from GitHub. We will continue more in the next tutorials.

Thanks, Happy Coding!

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs