Angular JS ng-repeat and modal dialog

Question

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

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>

score 1 · Accepted Answer · edited May 23 '17 at 10:33

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)"

I would check this out:

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

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

score 1 · Answer 2 · edited May 23 '17 at 10:33

1

Check this version in Plunker: Working Version

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

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

edited May 23 '17 at 10:33

Community

1
1

answered Aug 26 '14 at 14:04

ani07

148
1
9

Thank you. You save my life – Priyantha Sep 08 '18 at 17:04

Angular JS ng-repeat and modal dialog

2 Answers2