Angular JS ng-repeat 和模态对话框

Posted

技术标签:

【中文标题】Angular JS ng-repeat 和模态对话框【英文标题】:Angular JS ng-repeat and modal dialog 【发布时间】:2014-10-19 01:36:39 【问题描述】:

我正在遍历一个学生列表,每一行都有学生姓名和学院以及一个按钮。单击按钮后,您会看到一个显示学生详细信息的模式对话框。由于某种原因,我无法获得正确的学生信息。该对话框仅显示第一个学生的信息。这是pluker

http://plnkr.co/edit/kXB7OZuyOz57qyVMIu8T?p=preview

<div class="table-responsive">
        <table class="table table-striped">
            <tr ng-repeat = "student in students">
                <td>student.name</td>
                <td>student.college</td>
                <td>
                    <div class="modal-header">
                        <button type="button" class="btn btn-primary"
                        data-toggle="modal" data-target="#dialogTestDialog">Options</button>
                    </div>
                    <div   class="modal fade" id="dialogTestDialog" tabindex="-1" role="dialog" aria-labelledby="executionOptionLabel"
                            aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                    Student : student.name <br/> Detail on Student
                                    <div class="modal-body">
                                        <p>student.age</p>
                                        <p>student.address</p>
                                        <p>student.race</p>
                                    </div>

                            </div>
                        </div>
                    </div>   
                </td>
            </tr>

        </table>
    </div>

【问题讨论】:

【参考方案1】:

问题是你所有的模态都有相同的 id 值,所以这不是有效的 html。您需要不同的 id 值,以便您可以在点击时引用正确的值。例如:ng-click="showModal($index)"

我会检查一下:

How to set the id attribute of a HTML element dynamically with angular js?

另外,如果你真的想使用 bootstrap js 和 angular,你应该使用特定于 angular 的版本:http://angular-ui.github.io/bootstrap

【讨论】:

【参考方案2】:

在 Plunker 中查看此版本:Working Version

要获取 ng-repeat 索引值,您必须使用 $index ng-repeat documentation

and to data-toggle 应该是 bootstrap Here中指定的值

【讨论】:

谢谢。你救了我的命

以上是关于Angular JS ng-repeat 和模态对话框的主要内容,如果未能解决你的问题,请参考以下文章

Angular.js ng-repeat 跨多个元素

angular.js ng-repeat 用于创建网格

Angular JS - ng-repeat 和循环条件

Angular js - 如果 ng-repeat 为空则显示消息

如何在 angular.js 中解析 ng-repeat 中的 HTML [重复]

angular.js > 如何在视图中获取内部 JSON 数据(使用 ng-repeat 指令)