使用angular将数据从表传递给模态

时间:2018-03-20 19:12:01

标签: spring angular twitter-bootstrap modal-dialog

我使用Spring MVC和AngularJS来构建我的应用程序,我一直在寻找一种方法将表注册表数据传递给模态以编辑该注册表但是我还没找到一个工作示例,这就是我的问题如何我可以将注册表数据传递给模态吗? 这是我到目前为止: 表

<table class="table table-hover table-responsive">
                                <thead class="table-striped">
                                <th>Email</th>
                                <th>Nombre</th>
                                <th>Apellidos</th>
                                <th>Rol</th>
                                <th>Acciones</th>
                                </thead>
                                <tbody>
                                    <tr data-ng-show="allUsuarios.length === 0">
                                        <td colspan="4" class="warning">No hay registros para mostrar</td>
                                    </tr>
                                    <tr data-ng-repeat="usuarios in allUsuarios">
                                        <td>{{usuarios.email}}</td>
                                        <td>{{usuarios.nombre}}</td>
                                        <td>{{usuarios.apellidos}}</td>
                                        <td>{{usuarios.idRol.tipoRol}}</td>
                                        <td>
                                            <input type="hidden" value="{{usuarios.idUsuario}}"/>
                                            <button class="btn btn-primary" data-toggle="modal" data-target="#formModalEditar"><i class="glyphicon glyphicon-pencil"></i></button>
                                            <button class="btn btn-danger" data-toggle="modal" data-target="#formModalEliminar"><i class="glyphicon glyphicon-trash"></i></button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>

模态:

<!--EDIT MODAL-->
                        <div class="col-lg-12">
                            <div class="modal fade" id="formModalEditar" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                            <h4 class="modal-title" id="H2">Editar Usuario</h4>
                                        </div>
                                        <div class="modal-body">
                                            <form role="form" action="add" method="post">
                                                <div class="form-group">
                                                    <label>Email</label>
                                                    <input class="form-control" type="text" required=""/>
                                                    <label>Nombre</label>
                                                    <input class="form-control" type="text" required=""/>
                                                    <label>Apellidos</label>
                                                    <input class="form-control" type="text" required=""/>
                                                    <label>Rol</label>
                                                    <br>
                                                    <div class="btn-group open">
                                                        <button data-toggle="dropdown" class="btn dropdown-toggle">Action <span class="caret"></span></button>
                                                        <ul class="dropdown-menu">
                                                            <li><a href="#">Action</a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="text-right">
                                                    <button type="submit" class="btn btn-success">Guardar</button>
                                                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--END EDIT MODAL-->

PS:我不知道为什么当我按 Ctrl + K 来格式化代码时,它就会显示出来,抱歉。

1 个答案:

答案 0 :(得分:0)

首先,您必须在角度分量中定义一个注册

currentRegistery : Registery;

在您的表格中,您必须在每个注册表的编辑图标上添加一个onclick,以便能够使用所选的注册表设置当前的Registery

<button class="btn btn-primary" data-toggle="modal" data-target="#formModalEditar" onclick=“currentRegistery=usuarios”><i class="glyphicon glyphicon-pencil"></i></button>

最后在你的模态上你可以直接处理currentRegistery对象。