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.

• 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 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.

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

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

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

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

<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,

<select name="department" id="department" class="form-control" ng-model="student.department">
    <option>Math</option>
    <option>Physics</option>
    <option>Chemistry</option>
    <option>English</option>
</select>

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

<div class="checkbox">
    <label><input type="checkbox" value="hobbiesTravel" ng-model="student.hobbiesTravel" />Travelling</label>
</div>
<div class="checkbox">
    <label><input type="checkbox" value="hobbiesPhotography"  ng-model="student.hobbiesPhotography"/>Photography</label>
</div>
<div class="checkbox">
    <label><input type="checkbox" value="hobbiesGaming"  ng-model="student.hobbiesGaming"/>Gaming</label>
</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.

<div class="radio">
    <label><input type="radio" name="gender" value="Male" ng-model="student.gender" /> Male</label><br />
</div>
<div class="radio">
    <label><input type="radio" name="gender" value="Female" ng-model="student.gender" /> Female</label><br />
</div>

Step 2

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

studentFormsApp.factory('sfService',
    function () {
        return {
            student: {
                fullName: "Kishor Bikram Oli",
                objective: "To become a great software engineer",
                department: "Physics",
                hobbiesGaming: true,
                hobbiesTravel: false,
                hobbiesPhotography: true,
                gender: "Male"
            }
        }
    });

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 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”,

studentFormsApp.controller('sfController',
    function sfController($scope, sfService) {
        $scope.student = sfService.student;

        $scope.departments = [
               "Math",
               "Physics",
               "Chemistry",
               "English"
        ];
    });

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

<select name="department" id="department" class="form-control"
        ng-model="student.department"
        ng-options="dept for dept in departments">
</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.

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

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

studentFormsApp.controller('sfController',
    function sfController($scope, sfService) {
        $scope.student = sfService.student;

        $scope.departments = [
               "Math",
               "Physics",
               "Chemistry",
               "English"
        ];

        $scope.submitForm = function () {
            alert("Form submitted");
            //AJAX calls, validations, will be covered later.
        };

    });

Step 5

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



Complete HTML code for “sfTemplate.html” is -

<form role="form" class="form-horizontal" ng-submit="submitForm()">
    <fieldset>
        <legend>Basic Information</legend>
        <div class="form-group">
            <label for="fullName" class="col-sm-3 control-label">Name</label>
            <div class="col-sm-9">
                <input type="text" id="fullName" name="fullName" class="form-control"
                       ng-model="student.fullName"/>
            </div>
        </div>
        <div class="form-group">
            <label for="objective" class="col-sm-3 control-label">Objective</label>
            <div class="col-sm-9">
                <textarea name="objective" id="objective" class="form-control" rows="5" cols="40" ng-model="student.objective"></textarea>
            </div>
        </div>

        <div class="form-group">
            <label for="department" class="col-sm-3 control-label">Department</label>
            <div class="col-sm-9">
            <select name="department" id="department" class="form-control"
                    ng-model="student.department"
                    ng-options="dept for dept in departments">
            </select>
            </div>
        </div>
    </fieldset>

    <br />

    <fieldset>
        <legend>Hobbies</legend>
        <div class="form-group">
            <div class="col-sm-3">

            </div>
            <div class="col-sm-9">
                <div class="checkbox">
                    <label><input type="checkbox" value="hobbiesTravel" ng-model="student.hobbiesTravel" />Travelling</label>
                </div>
                <div class="checkbox">
                    <label><input type="checkbox" value="hobbiesPhotography"  ng-model="student.hobbiesPhotography"/>Photography</label>
                </div>
                <div class="checkbox">
                    <label><input type="checkbox" value="hobbiesGaming"  ng-model="student.hobbiesGaming"/>Gaming</label>
                </div>
                <br />
            </div>
        </div>
    </fieldset>

    <fieldset>
        <legend>Gender</legend>
        <div class="form-group">
            <div class="col-sm-3"></div>
            <div class="col-sm-9">
                <div class="radio">
                    <label><input type="radio" name="gender" value="Male" ng-model="student.gender" /> Male</label><br />
                </div>
                <div class="radio">
                    <label><input type="radio" name="gender" value="Female" ng-model="student.gender" /> Female</label><br />
                </div>
                <br />
            </div>
        </div>
    </fieldset>
    <input type="submit" class="btn btn-primary col-sm-offset-3" value="Submit" />
</form>

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

Thanks, Happy Coding!