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 为空则显示消息