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

Posted 2023-02-15

【中文标题】如何在 Bootstrap 模式中传递值/参数

【英文标题】：How to pass values / Parameters in the Bootstrap modal

【发布时间】：2021-10-14 07:25:28

【问题描述】：

我想做一个类似取消按钮的东西，当用户点击取消按钮时，它会打开一个模式询问“你确定要取消任务吗”，如果用户按下“确定”，函数将被调用我正在调用 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/>

cancelMeeting功能-

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

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

cancelCalling函数-

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

我知道一定有某种方法，我做错了，但我无法弄清楚我应该做什么。请帮我 谢谢。

【参考方案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>