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计数超过 3 （n计数），我想创建td代码。

喜欢

 Address1        Address2       Address3      

 AAAA             BBBB            CCCC        

Address5      Address6     

 DDDDD           EEEEE

我尝试使用角度$index % 2公式来解决这个问题。但它对我不起作用（对此有任何想法???）。所以我决定将td标签包裹为tr标签，同时增加（如响应）整个td大小大于表格宽度。

所有想法都受到赞赏......

Answer 1

结帐https://developers.google.com/chart/interactive/docs/gallery/sankey。它使用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;
}

如果coulmn计数大于3，则使用角度js中的ng-repeat动态添加行

1 个答案:

视图

AngularJS应用程序

CSS