Angular JS ng-repeat和modal对话框

I am iterating over a list of students and each row has the student name and college and a button. On clicking the button you see a modal dialog which shows student details. For some reason I am unable to get the correct student information. The dialog just shows the 1'st student information only. Here is the pluker

我正在迭代一个学生名单,每一行都有学生姓名,大学和一个按钮。单击该按钮,您会看到一个显示学生详细信息的模式对话框。由于某种原因,我无法获得正确的学生信息。该对话框仅显示第1个学生信息。这是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>

2 个解决方案

#1

The problem is that all your modals have the same id value, so this is not valid html. You need different id values so you can reference the correct one on click. eg: ng-click="showModal($index)"

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

I would check this out:

我会检查一下:

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

如何使用角度js动态设置HTML元素的id属性?

Also if you really want to play with bootstrap js and angular, you should use a version specific to angular: http://angular-ui.github.io/bootstrap

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

#2

Check this version in Plunker: Working Version

在Plunker:Working Version中查看此版本

To get the ng-repeat index value , you have to use {{ $index }} ng-repeat documentation

要获取ng-repeat索引值,必须使用{{$ index}} ng-repeat文档

and to data-toggle should be the values specified in bootstrap Here

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

#1