如何在 Bootstrap 模式中传递值/参数

Question

我想做一个类似取消按钮的东西，当用户点击那个取消按钮时，它会打开一个模式来询问“你确定要取消任务吗”，如果用户按下“确定”功能就会得到我正在拨打 API 电话。

但问题是有多个用户并且所有用户都有一个唯一 ID，我需要将该唯一 ID 传递给 API 以达到预期的结果，但我不知道如何做吧。我正在使用 AngularJS.

我的代码-

<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/>

取消会议功能-

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

取消模式 -

<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>

在 cancelModal 中，我在模态的确定按钮中定义了另一个 ng-click，以进行实际的 API 调用..

取消调用函数-

$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');
}

我知道一定有办法，我做错了，但我无法弄清楚我需要做什么。请帮我谢谢。

Answer 1

如何将您在 cancelMeeting 函数中选择的 ID 分配给范围变量

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

然后在你的模式中有这样的按钮：

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

如何在 Bootstrap 模式中传递值/参数

How to pass values / Parameters in the Bootstrap modal

javascript

json

twitter-bootstrap

angularjs