我正在使用Angular和ng-repeat以及
Semantic UI Grid布局.
我试图连续显示5列.达到第五个项目时,创建一个新行.下面为数据中的每个项创建一个新的行和列.我可以看到有一个带有ng-repeat的索引属性,但不知道如何基本上说如果mod 5 == 0输出一个新的行元素,否则只输出一个新列.
<div class="ui grid">
<div class="row" ng-repeat="item in data.results">
<div class="column">
<div class="ui segment">
{{item.original_title}}
</div>
</div>
</div>
</div>
谢谢您的帮助
解决方法
在我看来,最清洁,最易维护的方式是写一个指令.在您的HTML中,您只需：
<grid source="data.results" break="5" />
在您的JS中,您将数据分解为控制器中的正确结构并使用模板输出：
angular.module('yourApp',[])
.directive('grid',function() {
return {
restrict: 'E',scope: {
break: '=break',source: '=source'
},controller: function($scope) {
var total = Math.ceil($scope.source.length / $scope.break);
$scope.data = new Array(total);
for (var i = 0; i < total; ++i) {
$scope.data[i] = $scope.source.slice(i * $scope.break,(i + 1) * $scope.break);
}
},template:
'<div class="ui grid">' +
' <div class="row" ng-repeat="row in data">' +
' <div class="column" ng-repeat="item in row">' +
' <div class="ui segment">' +
' {{item.original_title}}' +
' </div>' +
' </div>' +
' </div>' +
'</div>',replace: true
};
});
