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

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 4Submitting 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!