Javascript 如何对表格行和列结构使用模运算符？

我使用ng repeat编写了下表中的td：

<div class="row">
            <div class="col-sm-10">
              <table class="customAttributesTable">
                <tbody>
                <tr>
                  <td class="col-sm-2" ng-repeat="customField in basicInfoCustomFields">
                    <label for="customer">{{ 'CUSTOMER' | translate }} </label>
                    <input type="text" ng-model="order.customer.name"  class="form-control" id="customer" />
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>

{{‘客户’|翻译}

我想问一下，我如何做到以下几点：

<!-- CUSTOM FIELDS -->
          <div class="row">
            <div class="col-sm-10">
              <table class="customAttributesTable">
                <tbody>
                <tr ng-switch on="$index%5==0" ng-repeat="customField in basicInfoCustomFields">
                  <td ng-repeat="i in [0,1,2,3,4]" class="col-sm-2" >
                    <label for="customer">{{basicInfoCustomFields[$parent.$index+i].label}} </label>
                    <input type="text" ng-model="basicInfoCustomFields[$parent.$index+i].value"  class="form-control" id="customer" />
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
          <!-- !!CUSTOM FIELDS -->

行中列的最大计数可以是5，若项目计数高于5，则表应包含新行

如果行中的项目数小于5，则缺少将计数5替换为标记的值：

  <td class="col-sm-2">

  </td>

因为表的数据存储为对象数组，所以我必须使用模运算符来实现这一点

如果有人有主意，我怎么做

非常感谢你的建议

编辑：

根据anpsmn回复，我尝试了以下内容：

<!-- CUSTOM FIELDS -->
          <div class="row">
            <div class="col-sm-10">
              <table class="customAttributesTable">
                <tbody>
                <tr ng-switch on="$index%5==0" ng-repeat="customField in basicInfoCustomFields">
                  <td ng-repeat="i in [0,1,2,3,4]" class="col-sm-2" >
                    <label for="customer">{{basicInfoCustomFields[$parent.$index+i].label}} </label>
                    <input type="text" ng-model="basicInfoCustomFields[$parent.$index+i].value"  class="form-control" id="customer" />
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
          <!-- !!CUSTOM FIELDS -->

{{basicInfoCustomFields[$parent.$index+i].label}

但它会产生如下结果（范围数组只有3项）：

您可以

ng repeat=“customFieldId in[0,1,2,3,4]”

然后

{{basicInfoCustomFields[customFieldId]}

。这样你就知道总有五个

td

s。您还可以

ng if=“customFieldId

了解列数据是否存在

对于超过5个项目，您可以在

中添加第二个

ng repeat=“customFieldId in[5,6,7,8,9]”

然后，您可以编写一个指令在

tr

s内部使用，这样就不会在它们内部重复代码

我在想这样的事情：

{{four[id].text}
{{five[id].text}
{{six[id].text}
{{six[id].text}

在哪里

function myCtrl($scope) {
    $scope.range = function(from, to) {
        var i, a = [];
        for(i = from; i < to; i++) {
            a.push(i);
        }
        return a;
    };

    $scope.four = [
        {text:'1'},
        {text:'2'},
        {text:'3'},
        {text:'4'}
    ];

    $scope.five = [
        {text:'1'},
        {text:'2'},
        {text:'3'},
        {text:'4'},
        {text:'5'}
    ];

    $scope.six = [
        {text:'1'},
        {text:'2'},
        {text:'3'},
        {text:'4'},
        {text:'5'},
        {text:'6'}
    ];
}

函数myCtrl（$scope）{
$scope.range=函数（从，到）{
var i，a=[]；
for（i=from；i

您可以通过以下操作进一步改进此功能：

<tr ng-repeat="row in [0, 1]">
    <td class="col-sm-2" ng-repeat="id in range(row * 5, (row + 1) * 5)">
        <span ng-if="six.length > id">{{six[id].text}}</span>
    </td>
</tr>

{{six[id].text}

---

通过这种方式，您可以在不重复代码的情况下处理多个潜在行。

更好的解决方案是为重复设置if条件

ng if=“$index%5”

更新：

添加了

-

，用于填充不足5列的其余列

<span>{{basicInfoCustomFields[$parent.$index+i].name || "-"}}</span>

/*将您的css放在这里*/
.row橙色{背景：橙色；页边距底部：10px；}
.row橙色td{边框底部：1px实心35; fff；}

{{basicInfoCustomFields[$parent.$index+i]。名称| |“-”}

您好，谢谢您，您能提供最新的代码片段吗？你的意思是在内部循环中使用2 ng if条件吗？您好，谢谢，它几乎可以正常工作，但问题是作用域包含例如3个值，它生成3行，而不是5列（2个不可见）。请参阅更新的问题。您是否也可以在问题中添加数组？嘿，似乎您使用了

ng开关on=“$index%5==0”

将该ng if作为我的第二个示例。。如果

ng开关小于
ng开关，则使用
ng开关。我已经删除了第一个解决方案，该解决方案的缺点是trs被重复，并用新的plunkr更新了答案。或者您可以像这样显示