L'utilisation de ng-repeat
avec les éléments span
ajoute tous les éléments span
sans espace entre eux, ce qui en fait une ligne indestructible qui n'emballe pas:
Code:
<span ng-repeat="label in labels">{{label}}</span>
rend html:
<span>label1</span><span>label 2</span><span>label3</span><span>label 3</span><span>label5</span><span>label 4</span>
Cela ne se termine pas dans un div étroit.
Question: comment le faire envelopper?
J'ai le même problème uniquement avec un tag ... Voici ma solution:
<span ng-repeat-start="label in labels" ng-bind="label"></span> <span ng-repeat-end></span>
Fondamentalement, tout ce qui se situe entre ng-repeat-start et ng-repeat-end sera répété, y compris les espaces ... Malheureusement, cela impliquait l'utilisation d'une balise span supplémentaire. Pas idéal ...
J'ai bien résolu le problème avec css. Il suffit de changer la plage en display:inline-block
et tout sera correctement emballé.
Cependant, dans ma situation spécifique, cela n'a pas fonctionné. J'avais besoin d'espace pour que les éléments se comportent correctement quand text-align:justify
leur était appliqué (en les espaçant uniformément dans le parent). Alors j'ai fait une directive:
angular.module('whatever')
.directive('addASpaceBetween', [function () {
'use strict';
return function (scope, element) {
if(!scope.$last){
element.after(' ');
}
}
}
]);
puis dans le html:
<span data-ng-repeat="(id, thing) in things" data-add-a-space-between>stuff</span>
Ma solution est (notez le caractère espace après la portée intérieure):
<span ng-repeat="gate in gates"><span class="label label-info">{{gate}}</span> </span>
Voici quelques approches différentes:
Vous pouvez utiliser la fonctionnalité d'habillage natif du navigateur, qui s'emballe lorsque des espaces sont rencontrés. Pour l'appliquer, insérez manuellement un espace après la valeur ( voir violon ):
<span ng-repeat="label in labels">{{label}} </span>
Une alternative consiste à utiliser quelques astuces CSS:
Insérer des espaces via CSS après chaque étape:
span:after{content:" "}
Flotter les étendues
une. Si div styling/border IS NOT important :
span { float:left; }
b. Si div styling/borderESTimportant , changez également display de div:
div { display:inline-block; }
span { float:left; }
_ {Remarque: l'encapsulation ne se produira que si une restriction de largeur est appliquée sur la div} _
La réponse de @ Pavel m'a aidée, en particulier en utilisant ng-repeat
sur un <span>
pour les étiquettes de bootstrap. Celles-ci doivent avoir un espace blanc final, sinon aucun espace ne sera rendu entre elles. Doubler la span
pour que la classe label label-default
ne soit pas sur la même span
que le ng-repeat
fait l'affaire.
<span ng-repeat="value in values">
<span class="label label-default">{{value}}</span>
</span>
Vous pouvez utiliser ng-class
et ajouter une classe pour tout sauf le dernier élément.
<span ng-repeat="label in labels"
ng-class="{space:!$last,last:$last}">{{label}}</span>
et
span.space:after {
// content: ', '; // I like comma separated
content: ' ';
}
Voici le violon. http://jsfiddle.net/dnozay/d3v6vq7w/
Si la réponse de vol7ron ne fonctionne pas, vous pouvez afficher des plages en ligne et leur ajouter une marge directement.
Voici le violon - JSFiddle
span {display:inline-block; margin-right:2px;}
<span ng-repeat="label in labels">{{label}}<br/></span>
ou
<div ng-repeat="label in labels">{{label}}</div>
C’est plus un problème de style que de logique.
Peut-être que ce qui suit peut vous aider:
<div><span ng-repeat="label in labels">{{label}}</span></div>
Si vous avez besoin d'un style supplémentaire pour l'adapter à votre application, essayez de clarifier votre question, mais j'espère que vous avez compris.
La réponse de Vol7ron est acceptable, sinon vous pouvez ajouter un espace à la fin des éléments de données. Cela a-t-il vraiment un cas d'utilisation dans le monde réel?
Vous pouvez voir que j'ai effectué quelques travées en dehors de tout contexte angulaire et que le même comportement est présenté. Apparemment, lorsque le navigateur affiche un seul mot sur une ligne et ne coupe pas les mots à l'aide d'un trait d'union s'il n'y a pas d'espace, il continue simplement vers la droite.
<span>I'm</span><span>not</span><span>even</span><span>angular</span><span>and</span><span>I</span><span>don't</span><span>wrap</span>
Espaces Javascript ajoutés aux données:
$scope.labels=["alongwooooooooord ", "alongwooooooooord2 ", "alongwooooooooord3 ", "ealongwooooooooord5 ", "falongwooooooooord5 "];
Donc, en fin de compte, le problème ici n’est pas anguleux ni lié à la répétition mais à la façon dont les navigateurs l’interprètent.
Ce que vous cherchez, c'est la balise
ou  
. Cette option fonctionne bien si vous prévoyez de réduire votre code HTML ultérieurement avec une tâche de groupe ou quelque chose de similaire.
<span ng-repeat="Word in words">
<span class="label label-success">{{Word}}</span>
</span>
De cette façon, l'espace s'affichera correctement même si votre code html est minifié.