Angular JS ng-repeat和模态对话框

27 浏览
0 Comments

Angular JS ng-repeat和模态对话框

我正在遍历一个学生列表，每一行都有学生的姓名、学院和一个按钮。点击按钮后，会弹出一个模态对话框，显示学生的详细信息。但由于某种原因，我无法获取到正确的学生信息。对话框只显示第一个学生的信息。这是pluker的链接：[http://plnkr.co/edit/kXB7OZuyOz57qyVMIu8T?p=preview](http://plnkr.co/edit/kXB7OZuyOZuyOz57qyVMIu8T?p=preview) 


    

        {{student.name}}
        {{student.college}}

0

2 答案

0 Comments

AngularJS中使用ng-repeat和模态对话框的问题及解决方法

在AngularJS中，我们经常使用ng-repeat指令来循环渲染列表数据，并且在某些情况下需要使用模态对话框来显示详细信息或进行编辑操作。然而，在使用ng-repeat和模态对话框时，有时会遇到一些问题。

问题的原因是，当我们想要获取ng-repeat循环的索引值时，需要使用{{ $index }}语法。而对于模态对话框的data-toggle属性，需要使用bootstrap中特定的值。如果我们没有正确设置这些属性，就会导致问题的出现。

解决方法是，首先要确保在ng-repeat中正确使用{{ $index }}来获取索引值。例如：


  
索引值：{{$index}}

接下来，确保在模态对话框中正确设置data-toggle属性的值。可以参考bootstrap文档或相关文档来了解可用的值。例如：

通过以上两个步骤，我们可以解决在AngularJS中使用ng-repeat和模态对话框时可能遇到的问题。

感谢您阅读本文，希望对您有所帮助！

0
0 Comments

问题的出现原因是所有的模态对话框都具有相同的id值，这是无效的html。你需要使用不同的id值，以便在点击时引用正确的模态对话框。例如：ng-click="showModal($index)"

可以参考这个链接：如何使用angular js动态设置HTML元素的id属性？

此外，如果你真的想使用bootstrap js和angular一起使用，你应该使用一个特定于angular的版本：http://angular-ui.github.io/bootstrap

0