html - 如果列数超过 3，则在 Angular js 中使用 ng-repeat 动态添加一行

Question

我正在使用 angularjs (ng-repeate) 动态创建表和行

示例 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>

数据:

$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"}]

现在结果显示为

Address1        Address2       Address3      Address5      Address6     

AAAA             BBBB            CCCC         DDDDD           EEEEE

但我想创建tr标记如果 td count 大于 3 (n count of number)。

喜欢

 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.

感谢所有想法......

Answer 1

查看 this fiddle .它使用 ul 列表来实现您所需要的。此解决方案不基于 2 个对象来呈现内容和标签。我建议不要将标签和值存储在不同的对象中。

查看

<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 应用

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;
}