我有一个模态,看起来像这样:
<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">×</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 单击重命名为其他名称来解决问题。