boy2020 boy2020 - 9 months ago 41
AngularJS Question

Trigger bootstrap modal by AngularJs and then get data by $

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 $ 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(' >more info</button>

Answer Source

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.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 class='modal-body'>
            <div class='modal-footer'>
               <button type='button' class='btn btn-default' 
  <!-- Modal end -->

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