Javascript 使用ng repeat时以角度创建行

我的代码重复API中的帖子，并在一行中显示9篇帖子。我的目标是创建一个网格-3行，每行有3个帖子。我尝试的解决方案不起作用。我也尝试了“clearfix”，但没有成功。 有人知道怎么做吗

代码如下：

var myApp=angular.module（'myApp'，['ngRoute'，'ui.bootstrap']）；
myApp.config（函数（$routeProvider）{
$routeProvider.when（“/”{
templateUrl:'allposts.htm'，
控制器：“PostsController”
})。当（“/post”{
templateUrl:'post.htm'，
控制器：“后控制器”
}).when（“/addpost”{
templateUrl:'addpost.htm'，
控制器：“AddController”
}).否则({
重定向到：'/'
});
});
myApp.controller（'PostsController'，函数（$scope）{
});
myApp.controller（'PostController'，函数（$scope）{
});
myApp.controller（'AddController'，函数（$scope）{
});
myApp.controller（'controller'，函数（$scope，$http）{
$scope.title=“我的应用程序”；
$http({
方法：“GET”，
url:“http://jsonplaceholder.typicode.com/posts"
}).然后（功能（响应）{
$scope.posts=response.data；
$scope.post=response.data[0]；
$scope.viewby=9；
$scope.totalItems=$scope.posts.length；
$scope.currentPage=1；
$scope.itemsPerPage=$scope.viewby；
$scope.maxSize=5；
});
$scope.setPage=函数（页码）{
$scope.currentPage=pageNo；
};
$scope.setItemsPerPage=函数（num）{
$scope.itemsPerPage=num；
$scope.currentPage=1；//重置为第一页
};
$scope.getRowClass=函数（索引）{
如果（索引%3==0）{
返回“行”；
}
};
});

应用程序
{{title}}
|
看法
9
18
36
100
帖子

{{post.body}


您可能需要在“行”div中添加一个ng repeat，以根据变量正确计算所需的行总数。实际上，您不必使用ng repeat输出任何内容，只需使用数组来确定所需的元素数。然后调整当前的ng repeat，从正确的起始位置对阵列进行适当的切片，以获得所需的列数。
问题在于您将角度材质与引导类混合。下面的示例仅使用引导

下一个问题是，当您制作网格时，例如，如果您在单个
行
元素中使用带有
的.col-xs-4
类的6个分区，则仅当所有6个分区的高度相同时，这些分区才会自动调整。否则，视图将像您的示例中那样混乱

要解决此问题，您必须创建多个
.row
元素，因此您可以编写一个指令在视图中执行此操作，或者在将列表传递给视图之前整理列表

以下示例是在控制器本身中对其进行签名（即在传递到视图之前）：


//用于整理列表的Helper函数
Array.prototype.collate=函数（collateSize）{
var collatedList=[]；
如果（我想你是在$httpService的then函数中声明了setPage、setItemsPerPage和getRowClass函数。谢谢，你说得对，但是在更正后它仍然不起作用。谢谢，它生成了一个很棒的网格，但是分页停止了。是的！正在修复。这是一个范围问题。现在检查更新的答案。运行整个页面中的示例无法正确查看。为了更清晰，我已将边框颜色更改为红色。