html - AngularJs 以表格格式打印 JSON 对象(自定义格式 - 每行 4 个对象)

Question

我有一个 api，它使用 angular Js $http 方法从服务器获取数据。现在我想以表格格式打印数据(我很清楚这一点并且之前尝试过没有任何问题)

我的 Json(现在是静态的)

    var app = angular.module('viewPhoto', ['ngTable']);
app.controller('viewControl', function($scope, ngTableParams) {
    var data = [{image: "avatar5.png", name: "orange1"},
                 {image: "avatar5.png", name: "orange2"},
                 {image: "dummy.png", name: "apple3"},
                 {image: "avatar5.png", name: "orange4"},
                 {image: "avatar5.png", name: "orange5"},
                 {image: "avatar5.png", name: "orange6"},
                 {image: "avatar5.png", name: "orange7"},
                 {image: "avatar5.png", name: "orange8"}
                 ];

    $scope.images = data;

    $scope.tableParams = new ngTableParams({
        page: 1,            // show first page
        count: 20          // count per page
    }, {
        total: data.length, // length of data
        getData: function($defer, params) {
            $defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
        }
    });
});

所以当我使用 ng-repeat 时，它会给我以下格式的结果。

orange1 
orange2
orange3
orange4
orange5

我试图实现的是数据应采用以下格式。

orange1  orange2  orange3 orange4 (i need only 4 object per row)
orange5  orange6  ...     ...

我尝试的是表格结构，但它逐行打印(每行一个对象)，所以我改变了我的方法以使用 div 的

<div ng-controller="viewControl">
                    <div  id="main_parent_row" ng-repeat="img in images">
                        <div id="pic1" style="width: 150px; color:#FFF; height: 150px;                  background-color: red; clear:both;display:inline-block; ">
                        </div>
                </div>

我尝试使用一个 div 作为父 div 并将其宽度固定为 800px，在父 div 内部我制作了一个宽度为 100 px 的子 div 来保存数据 - orange1，我教过是否没有空间供第 5 个 div 打印单行它将移动到下一行，因此我可以实现我的输出格式，但是 ng-repeat 强制我的 div 在下一行打印，以便逐行打印数据。问题:

1) 打印 json 对象(每行 4 个 - 如果我从 api 得到 10 个对象，那么它应该打印成 3 行)

2 ) 我需要进行分页以在一页中仅容纳 20 个对象。

3)我是否需要更改 JSON 格式以使其在 Angular 上变得简单？

如果我使用了错误的方法，请纠正我，是否有任何简单的方法可以做到这一点。(我花了一些时间在谷歌上搜索并尝试了一些 fiddle )请给我一些启发!

Fiddle link here

Answer 1

ng-repeat 重复它所在的元素。将重复项向下移动一位。

如果您还没有它，请确保您有要包装的 float:left; div。

Working Fiddle

<div ng-controller="viewControl" >
     <div  id="main_parent_row" style="max-width:800px;">
          <div ng-repeat="img in images"
                   style="float:left; width: 150px; color:#FFF; height: 150px;
                   background-color: red; clear:both;display:inline-block; ">
          </div>
     </div>
</div>

用于分页

我会看一下 Michael Bromley's pagination directive它非常流行并允许异步服务器端分页。

此外，您还在 ng-repeat 中嵌套了 id="pic1"。 ID 应该代表一个 View 中的唯一元素，而且你会有多个元素，所以我删除了它。