Angular, Bootstrap and ASP.NET MVC - Bootstrap Form Controls - Part Eight

The final “sfTemplate.html” will look like this.

<div class="modal-header">  
    <h1>Create New Student</h1>  
</div>  
  
<div class="modal-body">  
    <form role="form" class="form-horizontal">  
        <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="updatedStudent.fullName" />  
                </div>  
            </div>  
            <div class="form-group">  
                <label for="dateOfBirth" class="col-sm-3 control-label">Date of Birth</label>  
                <div class="col-sm-9" uib-datepicker ng-model="updatedStudent.dob" datepicker-options="options"></div>  
            </div>  
            <div class="form-group">  
                <label for="time" class="col-sm-3 control-label">Time</label>  
                <div class="col-sm-9" uib-timepicker ng-model="updatedStudent.time" datepicker-options="options"></div>  
            </div>   
            <div class="form-group">  
                <label for="topCountries" class="col-sm-3 control-label">Top Countries</label>  
                <div class="col-sm-9">  
                    <input type="text" id="topCountries" name="topCountries" class="form-control" 
                           ng-model="updatedStudent.topCountries"  
                           uib-typeahead="country for country in topCountries | filter:$viewValue" />  
                </div>  
            </div>   
            <div class="form group col-sm-offset-3">  
                <div class="checkbox">  
                    <label>  
                        <input type="checkbox" value="isEligible" ng-model="updatedStudent.isEligible" />  
                        <span uib-tooltip="You need to be eligible student for further processing!" 
                              tooltip-placement="top" tooltip-trigger="mouseenter">  
                            Is student eligible?  
                        </span>  
                    </label>  
                </div>  
            </div>  
            <div class="form-group" uib-collapse="!updatedStudent.isEligible">  
                <label for="detailDescription" class="control-label col-sm-3">  
                    For eligible students...  
                </label>  
                <div class="col-sm-9">  
                    <textarea name="des" id="des" class="form-control" rows="5" cols="40"  
                              ng-model="updatedStudent.description"></textarea>  
                </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="updatedStudent.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="updatedStudent.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="updatedStudent.hobbiesTravel" />Travelling</label>  
                    </div>  
                    <div class="checkbox">  
                        <label><input type="checkbox" value="hobbiesPhotography" ng-model="updatedStudent.hobbiesPhotography" />Photography</label>  
                    </div>  
                    <div class="checkbox">  
                        <label><input type="checkbox" value="hobbiesGaming" ng-model="updatedStudent.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="updatedStudent.gender" /> Male</label><br />  
                    </div>  
                    <div class="radio">  
                        <label><input type="radio" name="gender" value="Female" ng-model="updatedStudent.gender" /> Female</label><br />  
                    </div>  
                    <br />  
                </div>  
            </div>  
        </fieldset>  
    </form>  
</div>   
<div class="modal-footer">  
    <div class="col-sm-offset-3 col-sm-9">  
        <div class="col-sm-offset-3 col-sm-9">  
            <input type="button" class="btn btn-default" value="Cancel" ng-click="cancelForm()" />  
            <input type="submit" class="btn btn-primary" value="Submit" ng-click="submitForm()" />  
        </div>  
    </div>  
</div>

Final sfController.js will look like this.

studentFormsApp.controller('sfController', function sfController($scope, $window, $routeParams, sfService) {
    if ($routeParams.id) {
        $scope.student = sfService.getStudent($routeParams.id);
    } else {
        $scope.student = { id: 0 };
    }
    $scope.updatedStudent = angular.copy($scope.student);
    $scope.departments = [
        "Math",
        "Physics",
        "Chemistry",
        "English"
    ];
    $scope.topCountries = [
        "Alaska",
        "Bhutan",
        "Canada",
        "Denmark",
        "Finland",
        "Greenland",
        "Holland",
        "India",
        "Maldives",
        "Nepal",
        "Oman",
        "USA",
        "Japan",
        "Qatar"
    ];
    $scope.submitForm = function () {
        if ($scope.updatedStudent.id == 0) {
            // Insert new student data
            sfService.insertStudent($scope.updatedStudent);
        } else {
            // Update the student data
            sfService.updateStudent($scope.updatedStudent);
        }
        $scope.student = angular.copy($scope.updatedStudent);
        $window.history.back();
    };
    $scope.cancelForm = function () {
        $window.history.back();
    };
});

Please go through the official site for more information on controls.

Get the complete project from GitHub.

In this article, we have learned bootstrap form control. We will learn more in the next articles. I'll keep you posted.

Thanks, happy coding!