如何对 table 行和列结构使用模运算符？

Question

我有以下 table 使用 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>

我想请问我该如何做：

行中的最大列数可以是 5，如果项目数大于 5 table 应该包含新行。

如果行中的项目数小于 5 则缺失值计数 5 替换为标签：

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

  </td>

因为 table 的数据存储为对象数组，所以我必须使用模运算符来执行此操作。

谁有想法，请问我该怎么做？

非常感谢您的任何建议。

编辑：

根据 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 -->

但它产生的结果是这样的（作用域数组只有 3 个项目）：

Answer 1

您可以 ng-repeat="customFieldId in [0, 1, 2, 3, 4]" 然后 {{ basicInfoCustomFields[customFieldId] }}。这样你就知道总会有五个 td。您还可以ng-if="customFieldId < basicInfoCustomFields.length"知道列数据是否存在。

对于超过 5 个项目，您可以在 <tr ng-if="basicInfoCustomFields.length > 5"> 内添加第二个 ng-repeat="customFieldId in [5, 6, 7, 8, 9]"。

然后您可以编写指令在 tr 内部使用，这样您就不会在其中复制代码。

我正在考虑 this:

<table ng-controller="myCtrl">
<tbody>
    <tr>
        <td class="col-sm-2" ng-repeat="id in range(0, 5)">
            <span ng-if="four.length > id">{{four[id].text}}</span>
        </td>
    </tr>

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

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

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

其中

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

您可以通过这样做进一步改进：

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

通过这种方式，您可以处理多个潜在行而不会出现代码重复。

Answer 2

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

ng-if="$index%5"

更新：

添加了 - 用于填充小于 5 的其余列

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

Plunkr

演示

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

    app.controller('MainCtrl', function($scope) {

      $scope.basicInfoCustomFields = [
          {"name":"Anto"},
          {"name":"Julie"},
          {"name":"John"},
          {"name":"Doe"},
          {"name":"Ray"},
          {"name":"Sassy"},
          {"name":"Wright"},
          {"name":"Fred"},
          {"name":"Flintstone"},
          {"name":"Price"},
          {"name":"Dave"},
          {"name":"Neo"},
          {"name":"Jack"},
          {"name":"Lee"},
          {"name":"Eoin"},
          {"name":"Victor"},
          {"name":"Rita"}
      ];

    });

 /* Put your css in here */

    .row-orange { background: orange; margin-bottom: 10px;}
    .row-orange td {border-bottom: 1px solid #fff;}

    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
    <body ng-app="app"  ng-controller="MainCtrl">
       
        <div class="container">
           <div class="row">
                <div class="col-xs-12">
                  <table class="customAttributesTable">
                    <tbody >
                     <tr ng-if="$index%5==0"  ng-repeat="customField in basicInfoCustomFields" class="row-orange" >
                       <td ng-repeat="i in [0,1,2,3,4]"    class="col-xs-2">
                          <span>{{basicInfoCustomFields[$parent.$index+i].name || "-"}}</span>  
                       </td>
                     </tr>
                    </tbody>
                  </table>
                </div>
              </div>
        </div>
       
      </body>

如何对 table 行和列结构使用模运算符？

How to use modulo operator for table row and col structure?

javascript

html-table

modulo

angularjs