Question

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

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>

Answer 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

Answer 2

在Plunker中检查此版本：Working Version

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

和data-toggle应该是bootstrap Here

中指定的值

Angular JS ng-repeat和模态对话框

2 个答案: