使用 ng-repeat 在 HTML 中创建表格答案

【问题标题】：Create table in HTML using ng-repeat使用 ng-repeat 在 HTML 中创建表格
【发布时间】：2014-08-14 06:59:46
【问题描述】：

我有一个 string 数组，我需要使用 ng-repeat 或 AngularJS 来显示它，如下图所示：

我有一个想法，在 index-s 中“播放”以显示：

<tbody ng-repeat="param in params">
  <tr>
    <td>{{param.name}}</td>
  </tr>
</tbody>

对于每一行，我将显示第一项，并在同一行中显示每个 ($index, $index + 3, $index + 6)

还有其他的想法，或者想法如何做到这一点？

【问题讨论】：

"并在同一行中显示每个 ($index, $index + 3, $index + 6)"。这与显示的图像的逻辑不同，它将数组平均分成 3 列。
如果由于浏览器兼容性原因不能使用 CSS3，您可以使用 CSS3 coumn-count 或其他 CSS 方法解决此问题 (pterkildsen.com/2012/12/08/…)

标签： angularjs angularjs-ng-repeat ng-repeat

【解决方案1】：

你可以这样做： http://jsfiddle.net/cmdm1dhL/1/

<div ng-controller="MyCtrl">
    <table>
        <tr ng-repeat="row in [] | range:Math.ceil(items.length/tableColumns)">
            <td ng-repeat="item in items | everyNth:row:Math.ceil(items.length/tableColumns)">{{item}}</td>
        </tr>
    </table>
</div>


<script type="text/javascript">
var myApp = angular.module('myApp',[]);

myApp.filter('range', function() {
    return function(input, total) {
        total = parseInt(total);
        for (var i=0; i<total; i++)
            input.push(i);
        return input;
    };
});

myApp.filter('everyNth', function() {
    return function(input, row, nth) {
        var output = [];
        for (var i=row; i<input.length; i+=nth)
            output.push(input[i]);
        return output;
    };
});

function MyCtrl($scope) {
    var numberOfItems = 14;
    $scope.items = [];
    for (var i=1; i<=numberOfItems; i++)
        $scope.items.push('Item ' + i);

    $scope.tableColumns = 3;

    $scope.Math = window.Math;
}

</script>

【讨论】：