Angular Bootstrap UI : Simple Example of Modal Box with HTTP service

Modal box is very commonly used UI for display message or records, its open a overlay layout on your main page and display records very awesome manner.You can close and cancel as well this modal box.

There are number of jQuery plugin exist on market some are free and some are paid,Each plugin have some callback function that will use to open modal box,close modal and animation on modal etc functionality.

You can also learn from this tutorial How To Create Simple Model Popup Box using bootstrap modal box.

In This article We will use Bootstrap AngularJS UI modal for modal box and fill data from HTTP angular service.Its very simple to use as like bootstrap modal box.You can download Bootstrap AngularJS from Angular UI Bootstrap – Bootstrap components written in AngularJS

How To Open Modal Box

Here I am opening modal box onClick of a button,When user clicked this button we will call method to open modal box.

Step 1: Create an html element which is responsible to open a modal box.

Select Code
1
<button class="btn small-add-btn green-background" ng-click="getModal()">Add User</button>

Step 2: Define a modal box function in controller.

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
appUsModal.controller('PHPCnrl', ['$scope', '$modal', function ($scope, $modal) { 
 $scope.getModal = function () {
          $modalInstance = $modal.open({
              animation: true,
              templateUrl: '/userList.html',
              controller : 'UserModalCtrl',
              size: '',
              resolve: {
                users: function () {
                  return $scope.users;
                }
              }
            });
            
      }
}]);

Here we have defined source html file template which has modal box layout.We have also defined a 'UserModalCtrl' to manage modal action and scope variable.

This will show a blank modal box.

Step 3: Define close call function to close modal box.

Select Code
1
2
3
$scope.close = function () {
        $modalInstance .close();
      };

Step 4: Define a HTTP service that will get result from REST service.

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//function for get datas from service
        $scope.getUsers = function () {
             var request = {
                    method: 'GET',
                    url:   '/users/',
                    headers: {
                       
                    }
                 };
            
             request.success(function (data) {
                $scope.users = angular.copy(data.results);
                
             }).error(function (data) {
                console.log(data);
             }).finally(function() {
             });
        };

Step 5: Define modal box template file.

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div>
        <div class="modal-header">
            <h4 class="modal-title">Users List</h4>
        </div>
        <div class="modal-body">
             <table class="table table-responsive table-hover table-condensed">
                  <thead>
                     <tr><th>Name</th><th>Type</th></tr>
                  </thead>
                  <tbody>
                     <tr class="cursor-pointer" ng-repeat="user in users | filter:search">
                        <td>{{user.name}}</td>
                        <td>{{user.role}}</td>
                     </tr>
                     
                  </tbody>
               </table>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="close()">Close</button>
        </div>