Angular JS ng-repeat 和模态对话框答案

【问题标题】：Angular JS ng-repeat and modal dialogAngular JS ng-repeat 和模态对话框
【发布时间】：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>

【问题讨论】：

标签： angularjs dialog

【解决方案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中指定的值

【讨论】：

谢谢。你救了我的命