引导模式在打开新模态时不起作用

Bootstrap Modal not working when opening a new modal

本文关键字：模态 不起作用 新模态 模式      更新时间：2023-09-26

我有一个模态，看起来像这样：

<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="myModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="myModal" align="center">Details</h4>
  </div>
  <div class="modal-body">
    <table align="center" class="table table-bordered table-striped" style="width:auto">
<tr>
    <th>Name</th>
    <td>{{ details.name }}</td>
</tr>
<tr>
    <th>Type</th>
    <td>{{ details.type }}</td>
</tr>
</table>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>

及其触发器（表中的 TD）：

<tr ng-repeat="device in devices">
   <td><button class="btn btn-info" ng-click="details(device.id)" data-toggle="modal" data-target="#modalDetails">Details</button></td>

第一次按下按钮时，模态会触发并获取相应的值，但是当我通过按"关闭"按钮关闭它并尝试从表中的另一行打开另一个按钮时，出现此错误：

类型错误：v2.details 不是一个函数

at fn （编译时评估 （angular_min.js：220）， ：4：411）

在 E （angular_min.js：262）

在M.$eval （angular_min.js：137）

在M.$apply （angular_min.js：138）

at HTMLButtonElement.（angular_min.js：262）

at HTMLButtonElement.dispatch （jQuery.js：4670）

at HTMLButtonElement.elemData.handle （jQuery.js：4338）

当错误弹出时，控制器中的细节功能甚至不再发生。我做错了什么？

您应该通过 JavaScript 发送每一行的信息或数据。像这样：如您所见，我的变量是PHP格式的，但是您只需要用所使用的语言实现它即可。

<button  class="btn btn-warning btn-xs" data-toggle="modal" data-target=". modalDetalii" onclick="enviaEditar('.$row->id.','''.$row->nombre.''','''.$row->direccion.''');"</button>

所以你必须有一个函数调用"enviarEditar"

<script>
        function enviaEditar(id, nombre, direccion){
            document.getElementsByName('editarId')[0].value = id;
            document.getElementsByName('editarNombre')[0].value = nombre;
            document.getElementsByName('editarDireccion')[0].value = direccion;
        }
    </script>

在函数中，将值分配给输入

我通过将按钮内的 ng 单击重命名为其他名称来解决问题。

相关文章：