Usando o índice ng-repeat para exibir HTML diferente
-
21-12-2019 - |
Pergunta
Estou usando Angular e ng-repeat, bem como Grade de IU semântica layout.
Estou tentando exibir 5 colunas seguidas.Quando o quinto item for alcançado, crie uma nova linha.O exemplo abaixo cria uma nova linha e coluna para cada item nos dados.Posso ver que existe uma propriedade de índice com ng-repeat, mas não sei como dizer basicamente if mod 5 == 0
produza um novo elemento de linha, caso contrário, apenas produza uma nova coluna.
<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>
Obrigado pela ajuda
Solução
A maneira mais limpa e sustentável seria, na minha opinião, redigir uma diretiva.No seu HTML você simplesmente tem:
<grid source="data.results" break="5" />
E no seu JS você divide seus dados na estrutura correta dentro do controlador e os gera usando o modelo:
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
};
});
Outras dicas
Aqui está uma maneira de abordar isso que usa um filtro de intervalo.
Calculamos quantas linhas você precisará (data.results.length/5) e, em seguida, iteramos esse número de linhas usando ng-repeat
com o filtro de intervalo.
Então, dentro de cada linha, nós slice
as colunas necessárias para aquela linha e crie essas colunas com outro ng-repeat
.
<div class="row" ng-repeat="n in [] | range:(data.results.length/5)+1">
<span ng-repeat='item in data.results.slice($index*5,($index*5+5))'>
<div class="column">
<div class="ui segment">
{{item.original_title}}
</div>
</div>
</span>
</div>
e o filtro de intervalo associado (de: http://www.yearofmoo.com/2012/10/more-angularjs-magic-to-supercharge-your-webapp.html#more-about-loops):
app.filter('range', function () {
return function (input, total) {
total = parseInt(total);
for (var i = 0; i < total; i++) {
input.push(i);
}
return input;
};
Aqui está um violino disso: http://jsfiddle.net/BMrNs/1/
Tente usar ng-switch em combinação com Array.slice()
Não é o método mais eficiente, mas se você não tem como interferir na representação dos dados, é o melhor que consigo pensar.
<div class="ui grid">
<div ng-repeat="item in data.results">
<div ng-switch on="$index % 5">
<div ng-switch-when="0" class="row">
<div ng-repeat="e in data.results.slice($index, $index + 5)">
<div class="column">
<div class="ui segment">
{{e.original_title}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>