Utilizzo dell'indice NG-REPEAT per visualizzare diversi HTML
-
21-12-2019 - |
Domanda
Sto usando Angular e NG-ripetizione e semantic ui grid layout.
Sto cercando di visualizzare 5 colonne di fila.Quando viene raggiunto il quinto oggetto crea una nuova riga.Quanto segue crea una nuova riga e colonna per ogni elemento nei dati.Posso vedere che c'è una proprietà indice con NG-REPEAT ma non è sicuro di sapere fondamentalmente l'uscita if mod 5 == 0
Un nuovo elemento di riga compiuto solo una nuova colonna.
<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>
.
Grazie per l'aiuto
Soluzione
Il modo più pulito e più manutenibile sarebbe a mio avviso di scrivere una direttiva.Nel tuo HTML hai semplicemente:
<grid source="data.results" break="5" />
.
E nel tuo JS Brompi i tuoi dati nella struttura corretta all'interno del controller e l'emetterà utilizzando il modello:
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
};
});
. Altri suggerimenti
Ecco un modo per avvicinarsi a questo che utilizza un filtro del campo.
Calcoliamo quante righe di cui avrai bisogno (dati.results.length / 5) e quindi iterano su quel numero di righe utilizzando ng-repeat
con il filtro della gamma.
Poi all'interno di ogni riga noi slice
Out le colonne necessarie per quella riga e creare quelle colonne con un altro 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 il filtro della gamma associato (da: http://www.yearofmoo.com/2012/10/more-angularjs-magic-to-supercharch-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;
};
.
Ecco un violino di questo: http://jsfiddle.net/bmrns/1/ .
prova a usare ng-switch in combinazione con Array.slice()
non è il più efficienteMetodo Ma se non hai alcun modo per immischiarti con la rappresentazione dei dati, questo è il migliore che riesco a pensare.
<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>
.