如果列数超过 3，则在角度 js 中使用 ng-repeat 动态添加一行答案

【问题标题】：Dynamically add a row if the coulmn count is more than 3 with using ng-repeat in angular js如果列数超过 3，则在角度 js 中使用 ng-repeat 动态添加一行
【发布时间】：2017-08-06 01:52:57
【问题描述】：

我正在使用 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

但如果 td 计数大于 3 (n 个数字)，我想创建 tr 标记。

喜欢

 Address1        Address2       Address3      

 AAAA             BBBB            CCCC        

Address5      Address6     

 DDDDD           EEEEE

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

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

【问题讨论】：

ng-repeat 是 angularjs...
通过改变td/tr的显示属性可以实现
您要在表格的每一行中重复这些标题吗？
角或角 2 。我只需要任何版本的解决方案。我使用 angular 1 创建了一个示例 html。这就是为什么我提到 angular.js 标签
表格是错误的选择元素。你要找的是一个列表。表格用于显示表格数据。为什么您的标签数据在单独的对象中？你真的需要一个标签对象吗？

标签： html css angularjs user-interface

【解决方案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;
}

【讨论】：

很高兴为您提供帮助 =)