Question

I have a modal that looks like this:

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

and its trigger (a td from a table):

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

The first time I press a button, the modal triggers and it gets the corresponding values, but when I close it by pressing the Close button and try to open another one, from another row in the table, I get this error:

TypeError: v2.details is not a function

at fn (eval at compile (angular_min.js:220), :4:411)

at e (angular_min.js:262)

at m.$eval (angular_min.js:137)

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

The details function in the controller doesn't even occur anymore when the error pops. What did I do wrong?

Answer 1

You should send the information or data of each row via JavaScript. Something like this: As you can see my variables are in PHP, but you just have to implement it in the language you are using.

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

So you must have a function call "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>

In the function you assign the values to an input

Answer 2

我通过将按钮内的ng-click重命名为其他内容来解决问题。

Bootstrap Modal not working when opening a new modal

2 个答案: