current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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>
share|improve this question
    
possible duplicate of How to use "ng-repeat" within template of a directive in Angular JS? –  StarsSky Jan 26 '14 at 10:23
    
Data used is set of multiple arrays, if it was single list of array then HTML structure will work; –  John Smith Jan 26 '14 at 10:26

1 Answer 1

up vote 2 down vote accepted

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

share|improve this answer
    
how can I make my directive to wait for until the controller loads the value from service and binds to the view? –  John Smith Jan 26 '14 at 17:28
    
@John Smith: you don't need to wait, angular is smart enough to automatically update the views when the models are ready. –  Khanh TO Jan 27 '14 at 2:46

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.