CODEWITHSUNDEEP
javascripthtmlangularjs
Links
Links

Reputation: 227

How to populate data in table element?

I am trying to display table data within Angular framework

In my html

<table  class='table'>
        <tr>
             <th ng-repeat='test in tests'>{{test.name}}</th>    // it shows correctly...
         </tr>
          <tr ng-repeat=''>  //not sure what to do here...
                <td>Item</td><td>Item</td><td>Item</td><td>Item</td>
          </tr>
</table>

controller 

.controller('BoxCtrl', ['$scope', function ($scope) {
    $scope.tests = [
      {'name':'header1',
       'items':
           [
               {'name':'Item 1', 'link':'1'},
               {'name':'Item 2', 'link':'2'},
               {'name':'Item 3', 'link':'3'}
           ]
      },
      {'name':'header2',
       'items':
           [
               {'name':'Item 1', 'link':'i1'},
               {'name':'Item 2', 'link':'i2'}
           ]
      },
      {'name':'header3',
       'items':
           [
               {'name':'Item 1', 'link':'i1'},
               {'name':'Item 2', 'link':'i2'}
           ]
      },
      {'name':'header4',
       'items':
           [
               {'name':'Item 1', 'link':'I1'},
               {'name':'Item 2', 'link':'I2'},
               {'name':'Item 3', 'link':'I3'}                      
           ]
      }
    ];
}]);

I have no problem display data in TH but not sure how to apply hg-repeat in the tr and td. Can anyone give me a hint for this? Thanks a lot!

Upvotes: 1

Views: 79

Answers (1)

Alex Choroshin
Alex Choroshin

Reputation: 6187

You can do something like this:

Example:

<div ng-app="App" ng-controller="ctrl" >
<table  class='table'>
        <tr>
             <th ng-repeat='test in tests'>{{test.name}}</th>    
         </tr>
          <tr ng-repeat='itemsColl in tests'>  
              <td ng-repeat="item in itemsColl.itemsRow">{{item.name}}</td>
          </tr>
</table>
</div>

live Example: http://jsfiddle.net/choroshin/4mD86/

also in this stackoverflow answer you can find more information on dynamic table creation

Upvotes: 1

Related Questions