Pass parameter to bootstrap modal popup in angularjs

ethan k

Member

2 Points

1 Posts

I want to pass the unique userId from a list of user a logged in user clicks on to twitter bootstrap modal popup. I am using grails with angularjs, where data is rendered via angularjs.

<div ng-controller="ModalDemoCtrl">
    <table>
        <tr ng-repeat="user in result.users">    
            <td><div>
                <a href="#editUsetModal" data-toggle="modal">Edit </a>
                </div>
            </td>
        </tr>
    </table>  

    <div id="editUsetModal">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"
          aria-hidden="true">&times;</button>
        <h3>Confirm edit user?</h3>
      </div>
      <div class="modal-body">
          Do you really want to edit <b>{{aModel.userName}}</b>?
      </div>
      <div class="modal-footer">
        <button class="btn btn-info"
          ng-click="encourage({{aModel.userId}})">
          Confirm
        </button>
      </div>
    </div>
</div>

So, how can I pass user model to the modal dialog

Views: 22383
Total Answered: 1
Total Marked As Answer: 0
Posted On: 15-Jan-2018 00:29

Share:

Answers

hambi

Member

56 Points

2 Posts

To pass the parameter you need to use resolve and inject the items in controller and pass template in modal

$scope.editUser = function (id) {
        var modalInstance = $modal.open({
          templateUrl: 'myModalContent.html',
          controller: ModalInstanceCtrl,
          resolve: {
            uId: function () {
              return id;
            }
          }
        });
    };

Full controller code ( example.js ) :

var demoApp = angular.module('demoApp', ['ui.bootstrap']);
demoApp.controller('ModalDemoCtrl', ['$scope', '$modal', ModalDemoCtrl]);
function ModalDemoCtrl($scope, $modal) {
  $scope.result={};
  $scope.result.users=[{UserId:10, UserName: 'xyx'},
  {UserId:12, UserName: 'abc'}];
    $scope.editUser = function (id) {
        var modalInstance = $modal.open({
          templateUrl: 'myModalContent.html',
          controller: ModalInstanceCtrl,
          resolve: {
            uId: function () {
              return id;
            }
          }
        });
    };

    var ModalInstanceCtrl = function ($scope, $modalInstance, uId) {
      $scope.UserId = uId;
    };  
}

in Html page:

<!doctype html>
<html ng-app="demoApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
    <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
    <script src="example.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div ng-controller="ModalDemoCtrl">
        <table>
            <tr ng-repeat="user in result.users">  
                <td>{{user.UserName}}</td>            
                <td><div>
                    <a ng-click="editUser({{user.UserId}})">Edit </a>
                    </div>
                </td>
            </tr>
        </table>  
        <script type="text/ng-template" id="myModalContent.html">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"
              aria-hidden="true">&times;</button>
            <h3>Confirm edit user?</h3>
          </div>
          <div class="modal-body">
              Do you really want to edit</b>?
          </div>
          <div class="modal-footer">
            <button class="btn btn-info"
              ng-click="EditUserPage({{UserId}})">
              Confirm
            </button>
          </div>
        </script>
    </div>
  </body>
</html>