Question

我有一个项目数组，我想将它呈现为一个包含2列的表格。

我做了基本实现，只用一列进行渲染。有什么建议吗？

<body ng-app="myApp" ng-controller="myCtrl">
  <table>
    <tr ng-repeat="i in items">
      <td>{{i}}</td>
    </tr>
  </table>
</body>


var myApp = angular.module("myApp", []);

myApp.controller("myCtrl", function($scope) {
  $scope.items = ["12", "22", "34", "657", "129"];
});

https://jsfiddle.net/nkarri/9czrqLny/1/

Answer 1

这是因为您的HTML只有一个<td>元素，您不会重复。因为只有1，所以你只得到1列。您需要在ng-repeat元素中使用嵌套<td>才能获得超过1列，或者在HTML中明确定义两个<td>元素。

您可以尝试编写更复杂的内容以尝试确定何时应创建新列或行，但我会通过将数组创建为更容易使用的内容来简化操作：基本上是2-维数组。这就是我要做的事情：

<body ng-app="myApp">
    <div ng-controller="myCtrl">
        <table>
            <tr ng-repeat="row in items">
                <td ng-repeat="column in row">{{column}}</td>
            </tr>
        </table>
    </div>
</body>

var myApp = angular.module("myApp", []);

myApp.controller("myCtrl", function($scope) {
    $scope.items = [];
    $scope.items[0] = ["12", "22"];
    $scope.items[1] = ["34", "657"];
    $scope.items[2] = ["129", null];
});

https://jsfiddle.net/bntguybm/

请注意，如果这些数组中的任何一个包含2个以上的值，那么您还会看到包含该数据的行的额外列。

另一种方法就是这样，它只能保证2列。您需要为items对象创建一个对象数组。像这样：

<body ng-app="myApp">
    <div ng-controller="myCtrl">
        <table>
            <tr ng-repeat="row in items">
                <td>{{row.column1}}</td>
                <td>{{row.column2}}</td>
            </tr>
        </table>
    </div>
</body>

var myApp = angular.module("myApp", []);

myApp.controller("myCtrl", function($scope) {
    $scope.items = [];
    $scope.items[0] = {};
    $scope.items[0].column1 = "12";
    $scope.items[0].column2 = "22";
    $scope.items[1] = {};
    $scope.items[1].column1 = "34";
    $scope.items[1].column2 = "657";
    $scope.items[2] = {};
    $scope.items[2].column1 = "129";
    $scope.items[2].column2 = null;
});

https://jsfiddle.net/6v1701gx/1/

Answer 2

我用Google搜索并弄明白了。这就是我用索引想出来的。

<body ng-app="myApp" ng-controller="myCtrl">
  <table>
    <tr ng-repeat="i in items" ng-if="$index%7 == 0">
      <td>{{items[$index]}}</td>
      <td>{{items[$index+1]}}</td>
      <td>{{items[$index+2]}}</td>
      <td>{{items[$index+3]}}</td>
      <td>{{items[$index+4]}}</td>
      <td>{{items[$index+5]}}</td>
      <td>{{items[$index+6]}}</td>
    </tr>
  </table>
</body>

// the main (app) module
var myApp = angular.module("myApp", []);

// add a controller
myApp.controller("myCtrl", function($scope) {
  $scope.items = ['12', '22', '34', '657', '129', '11', '23', '45', '65', '9', '76', '87', '90', '33', '51'];
});

https://jsfiddle.net/nkarri/9czrqLny/2/

AngularJS从数组创建表

2 个答案: