Bootstrap Angular Directive – An Example on Modal Window

In this tutorial, I would like to share an example of using bootstrap modal window on angular directive.

I take an example of showing user list info in the table, the popup contains add user form.

Required:-

  • Bootstrap CSS – bootstrap.css
  • AngularJS library – angular.js
  • Bootstrap UI Angular Directive – ui-bootstrap-tpls-0.11.0.min.js

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" />
<script src="https://code.angularjs.org/1.3.0-rc.2/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>

we have two templates index.html and popup.html. Then we have script.js javascript file

index.html – It contains a table with header and body with ng-repeat directive to loop user info.

<div class="container"><table class="table">
 <tr>
 <th>Name</th>
 <th>Job</th>
 <th>Age</th>
 <th>Salary</th>
 <th>Address</th>
 </tr>
 <tr ng-repeat="usr in usrs">
 <td ng-bind="usr.name"></td>
 <td ng-bind="usr.job"></td>
 <td ng-bind="usr.age"></td>
 <td ng-bind="usr.sal"></td>
 <td ng-bind="usr.addr"></td>
 </tr>
 </table>
 <button class="btn btn-primary" ng-click="addUser()">Add User</button>
 </div>

popup.html – This contains add user form, that will be shown in the popup.
<form class="form-horizontal" role="form" ng-submit="submitUser()">
 <div class="modal-header">
 <h3 class="modal-title">Add a User</h3>
 </div>
 <div class="modal-body">
 <div class="form-group">
 <label for="UserName" class="col-sm-3 control-label">User Name</label>
 <div class="col-sm-5">
 <input type="text" class="form-control" id="Name" placeholder="User Name" ng-model="usr.name">
 </div>
 </div>
 <div class="form-group">
 <label for="UserJob" class="col-sm-3 control-label">Job</label>
 <div class="col-sm-5">
 <input class="form-control" type="text" placeholder="Job" id="UserJob" ng-model="usr.job" >
 </div>
 </div>
 <div class="form-group">
 <label for="UserAge" class="col-sm-3 control-label">Age</label>
 <div class="col-sm-5">
 <input type="number" class="form-control" id="UserAge" placeholder="Age" ng-model="usr.age">
 </div>
 </div>
 <div class="form-group">
 <label for="UserSal" class="col-sm-3 control-label">Salary</label>
 <div class="col-sm-5">
 <input type="text" class="form-control" id="UserSal" placeholder="Salary" ng-model="usr.sal">
 </div>
 </div>
 <div class="form-group">
 <label for="UserAddr" class="col-sm-3 control-label">Address</label>
 <div class="col-sm-5">
 <textarea rows="4" name="UserAddr" id="UserAddr" placeholder="Address" class="form-control" ng-model="usr.addr" ></textarea>
 </div>
 </div>
 </div>
 <div class="modal-footer">
 <button class="btn btn-default" type="button" ng-click="cancel()">Cancel</button>
 <button class="btn btn-primary" type="submit">Add User</button>
 </div>
</form>
script.js- This has controller logic to call popup and to add in the user table.
  • Module declaration injecting ui.bootstrap dependency module
    var userPopup = angular.module('userPopup', ['ui.bootstrap']);
    
  • Controller logic – popupController manages adding user info to the table and opens the add user popup and binds the popup to DialogInstCtrl controller when the add user button is clicked.
    userPopup.controller('popupController', function($scope, $modal, $log) {
            $scope.usrs = [];
            $scope.usr = {name: '', job: '', age: '', sal: '', addr:''};
            $scope.addUser = function(){ //popup logic and call
    };
    });
    

    Dialog Instance

    $modal is an service injected to popupController, which has only open method and having modal properties

  • modal properties that I used
    
            $scope.addUser = function(){
             var dialogInst = $modal.open({
        			  templateUrl: 'popup.html',
        			  controller: 'DialogInstCtrl',
        			  size: 'lg',
        			  resolve: {
        				selectedUsr: function () {
        				  return $scope.usr;
        				}
        			  }
    			    });
            };
    

    templateUrl: popup template URL
    controller: popup controller name
    size: popup size.
    resolve: promises from popup, similar to angular route module

    For more properties info find here

  • once popup opens there is an object return of modal instance, I used result property, there are few more also.
    dialogInst.result.then(function (newsku) { // function called when modal closed
    			    $scope.usrs.push(newsku); // pushing user info to users data object
    			    $scope.usr = {name: '', job: '', age: '', sal: '', addr:''}; // clear input after adding
    			}, function () { // function called when modal rejected
    			  $log.info('Modal dismissed at: ' + new Date());
    			});
    

    “result is a promise which will resolve when modal is closed or rejected called as dismiss.”

  • modal instance controller – DialogInstCtrl
    userPopup.controller('DialogInstCtrl', function($scope, $modalInstance, $log) {
    		  $scope.submitUser = function () {
    			  $modalInstance.close($scope.usr);
    
      		};
    		$scope.cancel = function () {
    		$modalInstance.dismiss('cancel');
    		  };
    });
    

    Injecting $modalInstance and binding close and dismiss actions to add user and close buttons.

Demo in plunker

    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> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>