CODEWITHSUNDEEP
htmlcssangularjsuser-interface
Ramesh Rajendran
Ramesh Rajendran

Reputation: 38683

Dynamically add a row if the coulmn count is more than 3 with using ng-repeat in angular js

I am doing dynamically create a table and rows with using angularjs (ng-repeate)

example html :

<table>
    <tr>
        <td ng-repeat="obj in labellist">
            {{obj.label}}
        </td>
    </tr>
    <tr>
        <td ng-repeat="obj in valauellist">
            {{obj.value}}
        </td>
    </tr>
</table>

Data:

$scope.labellist=[{lable:"Address1"},{lable:"Address2"},{lable:"Address3"},{lable:"Address3"},{lable:"Address5"},{lable:"Address6"}];

$scope.valauellist=[{Value:"AAA"},{Value:"BBBB"},{Value:"CCCC"},{lable:"Address1"},{Value:"DDDD"},{Value:"EEEE"}]

Now the result is displaying like 

Address1        Address2       Address3      Address5      Address6     

AAAA             BBBB            CCCC         DDDDD           EEEEE

But I want to create tr tag if the td count is more than 3 (n count of number) .

Like 

 Address1        Address2       Address3      

 AAAA             BBBB            CCCC        

Address5      Address6     

 DDDDD           EEEEE

I tried to solve this with using angular $index % 2 formula. but it's not working for me (any idea about this???). So I decide to wrap the td tag like as tr tag while increasing (like responsive) the whole td size is greater than table width.

All ideas are appreciated ...

Upvotes: 1

Views: 107

Answers (1)

lin
lin

Reputation: 18392

Check out this fiddle. It uses a ul list to achieve what you need. This solution does not base on 2 objects for rendering content and labels. I recommend to not store your labels and values in different objects.

View

<div ng-controller="MyCtrl">
  <ul>
    <li class="column-3" ng-repeat="item in items">
      <strong>{{ item.header}}</strong><br/>
      {{ item.value }}
    </li>
  </ul>
</div>

AngularJS application

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function ($scope) {
    $scope.items = [{
      header: 'test',
      value: 'value 1',
    },{
      header: 'test',
      value: 'value 1',
    },{
      header: 'test',
      value: 'value 1',
    },{
      header: 'test',
      value: 'value 1',
    },{
      header: 'test',
      value: 'value 1',
    }];
});

CSS

.column-3 {
  width:33%;
  float:left;
}

Upvotes: 1

Related Questions