Angularjs + load multiple array using ng-repeat

Question

How to load the multipe array data to the directive templateURL using ngrepeat

<div> <table> <tr> <td>h1</td> <td>v1</td> </tr> </table> </div>
<div> <table> <tr> <td>h2</td> <td>v2</td> </tr> </table> </div>
<div> <table> <tr> <td>h3</td> <td>v3</td> </tr> </table> </div>

DEMO LINK

Directive Controller:

 $scope.data  =[[{ h:'H1', v:'V1'}][{ h:'H2', v:'V2'}][{ h:'H3', v:'V3'}]];
 $scope.updateData = $scope.data;

Template Structure:

  <div ng-repeat="fields in updateData">
      <table>
      <tr>
          <td>{{f.h}}</td>
          <td>{{f.v}}</td>
      </tr>
    </table></div>

possible duplicate of How to use "ng-repeat" within template of a directive in Angular JS? — StarsSky
– StarsSky, Commented Jan 26, 2014 at 10:23
Data used is set of multiple arrays, if it was single list of array then HTML structure will work; — John Smith
– John Smith, Commented Jan 26, 2014 at 10:26

Khanh TO · Accepted Answer · 2014-01-26 10:25:46Z

2

Just add another ng-repeat on the <tr>

<div ng-repeat="fields in updateData">
      <table>
           <tr ng-repeat="f in fields">
              <td>{{f.h}}</td>
              <td>{{f.v}}</td>
           </tr>
       </table>
  </div>

DEMO

answered Jan 26, 2014 at 10:25

Khanh TO

49k13 gold badges101 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

John Smith Over a year ago

how can I make my directive to wait for until the controller loads the value from service and binds to the view?

Khanh TO Over a year ago

@John Smith: you don't need to wait, angular is smart enough to automatically update the views when the models are ready.

Collectives™ on Stack Overflow

Angularjs + load multiple array using ng-repeat

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related