How to pass values / Parameters in the Bootstrap modal

Issue

I want to make something like a cancel button, when user click on that cancel button it will open a modal to ask "Are you sure you want to cancel the task" and if user press "Ok" function will get called under which I am making an API call.

But the issue is there are multiple users and all users having one unique id, I need to pass that unique id to API in order to achieve the desired result, but I don't know how to do it. I am using AngularJS.

My code-

<tr ng-repeat="meeting in meetings">   //getting meetings form some other api call
   <td class="text-center" >
   <button type="button" class="btn mr-2 mb-2 btn-danger" data-toggle="modal" ng-click="cancelMeeting(meeting.meetingId)">Cancel Meeting</button>
  </td>
<tr/>

cancelMeeting Function -

 $scope.cancelMeeting = function(id){
   console.log("id =",id); //getting unique IDs
   $('#cancelModal').modal('toggle');
  }

cancelModal -

<div class="modal fade" id="cancelModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title center" id="exampleModalLabel">Cancel Meeting ?</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p class="mb-0">Are you sure you want to cancel the meeting ?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" ng-click="cancelCalling(meeting.meetingId)">Ok</button>
            </div>
        </div>
    </div>
</div>

In cancelModal I have defined another ng-click in the OK button of modal, to make actual API calling..

cancelCalling Function -

$scope.cancelCalling = function (meetId){
  console.log("Want id to be here so I can pass on API");
  console.log(meetId); //undefined for now
  //api calling
  $('#cancelModal').modal('toggle');
}

I know there must be some way, I am doing it wrong but I can't able to figure out what should I need to do. Please Help me Thanks.

Solution

How about you assign the selected ID in your cancelMeeting function to a scope variable

$scope.cancelMeeting = function(id){
   $scope.selectedId = id;
   $('#cancelModal').modal('toggle');
} 

Then in your modal have your button like this:

<button type="button" class="btn btn-primary" ng-click="cancelCalling(selectedId)">Ok</button>

Answered By - George DW