boy2020 boy2020 - 8 days ago 5
AngularJS Question

Trigger bootstrap modal by AngularJs and then get data by $http.post

I have a list of customers each customer have button more info.
I want , when i click on it then showing bootstrap modal by AngularJs controller and then request data by $http.post and getting some more info about this customer and showing info inside modal.
How can i do this purpose ?
this button :

<button type='button' class='btn btn-primary btn-sm'
data-ng-click='moreinfo(customer.id)' >more info</button>

Answer

You can first pass each customer info variable to each more info.

Button like this :

<button type='button' class='btn btn-primary btn-sm btnmargin' 
data-toggle='modal' data-target='#cInfo' data-ng-click='moreinfo(customer)'
 >more info</button>

then you should write this code inside controller :

$scope.customerinfo=[];
$scope.moreinfo= function(customer){
          $scope.customerinfo= customer;
};

Html bootstrap modal :

 <!-- Modal start -->
    <div class='modal fade' id='cinfo' tabindex='-1' role='dialog' 
aria-labelledby='myModalLabel' aria-hidden='true'>
        <div class='modal-dialog modal-lg' role='document'>
            <div class='modal-content'>
                <div class='modal-header'>
                    <button type='button' class='close' data-dismiss='modal'>
                       <span aria-hidden='true'>&times;</span>
                       <span class='sr-only'>Close</span></button>
                        <h4 class='modal-title text-danger' 
                         id='myModalLabel'>customer info</h4>
                </div>
                <div class='modal-body'>
                     {{customerinfo.firstName}}
                </div>
            <div class='modal-footer'>
               <button type='button' class='btn btn-default' 
            data-dismiss='modal'>close</button>
            </div>
        </div>
    </div>
  </div>
  <!-- Modal end -->

Now you can click on each row button more info and see info in inside modal body.