web-dev-qa-db-fra.com

Comment ajouter un espace après l'élément ng-repeat?

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?

http://jsfiddle.net/supercobra/6e8Bn/

javascriptcssangularjs
21
user198313

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 ...

33
JustMaier

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('&#32;');
            }
        }
    }
]);

puis dans le html:

<span data-ng-repeat="(id, thing) in things" data-add-a-space-between>stuff</span>
14
TorranceScott

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>
7
Pavel

Voici quelques approches différentes:

HTML

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>

CSS

Une alternative consiste à utiliser quelques astuces CSS:

  1. Insérer des espaces via CSS après chaque étape:

    span:after{content:" "}

  2. 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} _

4
vol7ron

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>

http://jsfiddle.net/gLmtyfj4/2/

3
Jonathan

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/

1
dnozay

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;}
1
Nix
<span ng-repeat="label in labels">{{label}}<br/></span>

ou

<div ng-repeat="label in labels">{{label}}</div>
0
zsong

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.

0
gustavohenke

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?

http://jsfiddle.net/6e8Bn/6/

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.

0
shaunhusain

Ce que vous cherchez, c'est la balise &nbsp; ou &#160;. 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>&nbsp;
</span>

De cette façon, l'espace s'affichera correctement même si votre code html est minifié.

0
Azarus