javascript - 对数组中的三个项目进行 ng-repeat

Question

我有一个看起来像这样的数组，

var object = [ "ABCD" , "EFGH" , "IJKL", "MNOP", "QRST", "UVWX" ];
$scope.object = object;

我想使用 ng-repeat 制作一个表格，表格中的每一行都应该包含 3 列。表应该是这样的，

Name Numb Type

ABCB EFGH IJKL
MNOP QRST UVWX

我的桌子是这样的

<thead>
     <th>Name</th>
     <th>Numb</th>
     <th>Type</th>
</thean>
<tr ng-repeat = "x in object">
     <td>{{x}}</td>
</tr>

我无法在这里每行维护 3 个项目。

标签： javascripthtmlangularjs

Answer 1

为此，您只需$scope.object使用大小为 3 的嵌套数组进行更新，以便我们可以打印每行中的前三个项目，例如：

var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope) {
  var object = ["ABCD", "EFGH", "IJKL", "MNOP", "QRST", "UVWX"];

  // Update array to size of three items instead like
  var size = 3;
  $scope.object = [];
  for (var i = 0; i < object.length; i += size) {
    $scope.object.push(object.slice(i, i + size));
  }
});

table{border-collapse:collapse;width:100%}
table td,table th{border:1px solid #ddd;padding:8px}
table th{padding-top:12px;padding-bottom:12px;text-align:left;background-color:#4caf50;color:#fff}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<section ng-app="myApp">
  <div ng-controller="AppCtrl">
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Numb</th>
          <th>Type</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="x in object">
          <td>{{x[0]}}</td>
          <td>{{x[1]}}</td>
          <td>{{x[2]}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

---

如果你想让td也动态，你可以使用ng-repeat表格单元格也喜欢：

var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope) {
  var object = ["ABCD", "EFGH", "IJKL", "MNOP", "QRST", "UVWX"];

  // Update array to size of three items instead like
  var size = 3;
  $scope.object = [];
  for (var i = 0; i < object.length; i += size) {
    $scope.object.push(object.slice(i, i + size));
  }
});

table{border-collapse:collapse;width:100%}
table td,table th{border:1px solid #ddd;padding:8px}
table th{padding-top:12px;padding-bottom:12px;text-align:left;background-color:#4caf50;color:#fff}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<section ng-app="myApp">
  <div ng-controller="AppCtrl">
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Numb</th>
          <th>Type</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="row in object">
          <td ng-repeat="cell in row">{{cell}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>