Ho un problema con più elementi ng-repeat quando si visualizzano gli elementi div come inline-block. C'è una strana divario tra gli elementi in cui uno ng-repeat finisce e quello successivo inizia, come illustrato dall'immagine:Intervallo tra gli elementi ng-repeat in Angular
Ho creato un plunk per illustrare questo comportamento:
perché sta succedendo questo e come rimuovere il divario?
Scegli questa plunk
C'è un trucco per rimuovere lo spazio tra gli elementi in linea che appare in linea-break.
<div class="red" ng-controller="TestCtrl">
<div class="blue number" ng-repeat="number in array1 track by $index">{{number}}</div><!--
--><div class="green number" ng-repeat="number in array2 track by $index">{{number}}</div><!--
--><div class="teal number" ng-repeat="number in array3 track by $index">{{number}}</div>
</div>
Si potrebbe leggere di più su altri hack here.
Ciò è dovuto al modo in cui la classe .number nel proprio css è definita. Se lo cambi in modo che contenga uno float: left, ti libererai del divario extra.
.number {
width: 20px;
height: 20px;
display: inline-block;
color: white;
text-align: center;
float: left;
}
Potete vedere il mio aggiornamento plunkr here
So che è abbastanza strano, ma gli spazi bianchi (crlf, spazi ...) tra i div inline blocco rendono lo spazio.
Se li rimuovi, lo spazio si spegne. (plunker demo)
Non sono riuscito a trovare alcun riferimento per la spiegazione ma la mia ipotesi è che poiché i caratteri si trovano tra blocchi in linea, viene interpretato come uno spazio come se gli elementi di blocco fossero effettivamente in linea (ad esempio span).
<body ng-app="testRepeat">
<div class="red" ng-controller="TestCtrl">
<div class="blue number" ng-repeat="number in array1 track by $index">{{number}}</div><div class="green number" ng-repeat="number in array2 track by $index">{{number}}</div><div class="teal number" ng-repeat="number in array3 track by $index">{{number}}</div>
</div>
</body>
Ciò è causato dalla spaziatura tra gli elementi <div>. Ci sono vari modi per affrontare questo come suggerito dalle altre risposte. Il mio layout preferito è:
<div class="blue number" ng-repeat="number in array1 track by $index">{{number}}</div
><div class="green number" ng-repeat="number in array2 track by $index">{{number}}</div
><div class="teal number" ng-repeat="number in array3 track by $index">{{number}}</div>
Ma gli altri suggerimenti sono validi.
Un altro modo per gestire questo problema senza preoccuparsi dell'HTML è impostare la dimensione del carattere del contenitore su 0 in modo che lo spazio vuoto non venga visualizzato.
http://plnkr.co/edit/wXKl61lyiqdONbChYI9o?p=preview
L'aspetto negativo di questo approccio è che non è possibile utilizzare i formati percentuali per i font elemento contenuto e si deve impostare in modo esplicito.
oh grazie mille ... pensavo che avrei dovuto spazzare l'intera sezione a causa di alcuni pixel di gap. –