Question

我有以下表格，其中td使用ng-repeat编写：

<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，则表应包含新行。

如果行中的项目数小于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 -->

但它产生这样的结果（范围数组只有3项）：

enter image description here

Answer 1

更好的解决方案是为重复

设置if条件

ng-if="$index%5"

更新

如果小于5

，则添加-以填充其余列

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

Plunkr

演示

＆＃13;

  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"}
      ];

    });

＆＃13;

 /* Put your css in here */

    .row-orange { background: orange; margin-bottom: 10px;}
    .row-orange td {border-bottom: 1px solid #fff;}

＆＃13;

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

＆＃13;

Answer 2

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

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

然后您可以编写一个在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>

通过这种方式，您可以处理多个潜在行而无需重复代码。

如何对表行和col结构使用modulo运算符？

2 个答案: