Why does adding an ng-repeat to my AngularJS template break it?

Question

I have an AngularJS directive whose template file looks like this:

path/to/myDirectiveA.template.html:

<tr>
    <td bgcolor='#7cfc00'>Statement</td>
    <td bgcolor='#ff1493'>{{MyDirectiveACtrl.a.b}}</td>
</tr>

It works. The output looks like this:

But then I change the template file by adding an ng-repeat like this:

<tr ng-repeat="currRow in [0, 1, 2, 3]">
    <td bgcolor='#7cfc00'>Statement</td>
    <td bgcolor='#ff1493'>{{MyDirectiveACtrl.a.b}}</td>
    <td bgcolor='#7cfc00'>{{currRow}}</td>
</tr>

And that causes it to break as you can see in the image below. The phrase Hello World! is no longer showing up! Why? How can I fix this problem??

I simply don't see any logical reason why adding an ng-repeat should cause this breakage. It doesn't make sense to me at all.

If you need it, here is the controller and directive that invoke it can be found in this question I posted earlier.

i think this question will give an idea about your question problem http://stackoverflow.com/questions/16573954/pass-parent-scope-value-into-ng-repeat-loop-in-angular — Ahmad Abu Saa, Sep 25 '16 at 07:30

score 1 · Answer 1 · answered Sep 25 '16 at 07:37

1

<tbody>
<tr ng-repeat="currRow in [0, 1, 2, 3]">
<td bgcolor='#7cfc00'>Statement</td>
<td bgcolor='#7cfc00'>MyDirectiveACtrl.a.b</td>
<td bgcolor='#ff1493'>{{MyDirectiveACtrl.a.b}}</td>
<td bgcolor='#7cfc00'>{{currRow}}</td>
</tr>
</tbody>

update your myDirectiveA.template.html .Hope it helps you :)

answered Sep 25 '16 at 07:37

Ujjwal kaushik

1,618
11
17

I don't want this directive to be in a `tbody` all the time. Sometimes it will be in `tfoot`, sometimes in `thead` depending on where the tag is placed. – Saqib Ali Sep 25 '16 at 07:41
its working for me in either of those places .. have you tried it ? – Ujjwal kaushik Sep 25 '16 at 07:45
No I haven't tried it. But nesting a `` inside a `` doesn't seem like a good thing to do. – Saqib Ali Sep 25 '16 at 19:39

score 1 · Answer 2 · answered Sep 25 '16 at 08:02

1

may this solve the problem ($parent)

<tr ng-repeat="currRow in [0, 1, 2, 3]">
    <td bgcolor='#7cfc00'>Statement</td>
    <td bgcolor='#ff1493'>{{$parent.a.b}}</td>
    <td bgcolor='#7cfc00'>{{currRow}}</td>
</tr>

answered Sep 25 '16 at 08:02

Ahmad Abu Saa

718
6
12

Why does adding an ng-repeat to my AngularJS template break it?

2 Answers2

Linked