Angular's ngRepeat does not work in $modal

Question

Hello I want to use Angular's ngRepeat in $modal (that is defined in ui-bootstrap-tpls-0.11.0.js). To implement the $modal I am using the exact same approach as presented here: http://angular-ui.github.io/bootstrap/
I have a controller -> PageController for my page (the one that the pop-up will be called from) and a controller for the pop-up -> ModalInstanceCtrl. In the PageController I define a list of objects and pass this list to ModalInstanceCtrl through the resolve property of the $modal.open() function. In debug I can see that in my ModalInstanceCtrl $scope I have the desired list.
In the $modal's html code I want to iterate on that list and add appropriate number of table rows with my desired information :). When I am using the ng-repeat on the tag I don't see any table rows. If I remove the ng-repeat and change it with several rows using myList[0].myProperty, this expression is evaluated and my $modal is displayed in an aceptable way. Sadly I don't know the lenght of myList, so I need to use something like ng-repeat.

This is working:

<div class="modal-body lang_label_popUp">
    <table>
        <tr>{{translationTablePlaceHolders[0].name}} &nbsp; <input class="input-medium input_popUp" type="text"></input></tr>
        <tr>{{translationTablePlaceHolders[1].name}} &nbsp; <input class="input-medium input_popUp" type="text"></input></tr>
        <tr>{{translationTablePlaceHolders[2].name}} &nbsp; <input class="input-medium input_popUp" type="text"></input></tr>
        <tr>{{translationTablePlaceHolders[3].name}} &nbsp; <input class="input-medium input_popUp" type="text"></input></tr>
    </table>
</div>

While this is not working:

<div class="modal-body lang_label_popUp">
    <table>
        <tr ng-repeat="placeHolder in translationTablePlaceHolders">{{placeHolder.name}} &nbsp; <input class="input-medium input_popUp" type="text"></input></tr>
    </table>
</div>

So is ng-repeat available from within my pop-up HTLM code at all?

I am using Angular v1.2.16 and ui-bootstrap-tpls-0.11.0.

Thanks in advance!

tasseKATT tasseKATT · Accepted Answer · 2014-05-10T08:38:58

This is not $modal related, but instead a HTML/ngRepeat issue.

Use td tags:

<table>
  <tr ng-repeat="placeHolder in translationTablePlaceHolders">
    <td>{{placeHolder.name}} &nbsp;
      <input class="input-medium input_popUp" type="text" />
    </td>
  </tr>
</table>

Consider the following example not using td with ng-repeat:

<body>
  <table>
    <tr ng-repeat="number in [ 1, 2, 3]">
      {{ number }}
    </tr>
  </table>
</body>

This would generate empty tags, like in your example:

<body class="ng-binding">
  <table>
    <tbody>
      <!-- ngRepeat: number in [ 1, 2, 3] -->
      <tr ng-repeat="number in [ 1, 2, 3]" class="ng-scope"></tr>
      <!-- end ngRepeat: number in [ 1, 2, 3] -->
      <tr ng-repeat="number in [ 1, 2, 3]" class="ng-scope"></tr>
      <!-- end ngRepeat: number in [ 1, 2, 3] -->
      <tr ng-repeat="number in [ 1, 2, 3]" class="ng-scope"></tr>
      <!-- end ngRepeat: number in [ 1, 2, 3] -->
    </tbody>
  </table>
</body>

Then consider the following example not using ng-repeat:

<body>
  <table>
    <tr>1</tr>
    <tr>2</tr>
    <tr>3</tr>
  </table>
</body>

While this would actually show 123, the markup would look like this (in Chrome at least):

<body>
  123
  <table>
    <tbody>
      <tr></tr>
      <tr></tr>
      <tr></tr>
    </tbody>
  </table>
</body>

Angular's ngRepeat does not work in $modal

1 Answers