Feature: Separator for ng-repeat tags.

[Masterovoi]

Hello developers AngularJS!

I need to get HTML (SPAN separated is a space):

<p class=tags>
<span>A</span> <span>B</span> <span>C</span> <span>D</span> <span>E</span>
</p>

I found how to solve the problem:

<p class=tags><span ng-repeat-start="item in items">{{ item.name }}</span> <i ng-repeat-end></i></p>

But it is very inconvenient.
I need an extra tag separator for ng-repeat, for example, ng-separator.
For examples HTML:

...
<span ng-repeat="item in items"  ng-separator=" ">...</span>
...

Help me please

[m-amr]

@Masterovoi why you don't use

   <p class="tags"><span ng-repeat="item in items">{{item.name}}</span></p>

and you will get

   <p class=tags>
          <span>A</span> <span>B</span> <span>C</span> <span>D</span> <span>E</span>
   </p>

?

[Masterovoi]

In your example AngularJS not used separator - space character - ASCII 32!
And so you do not get the result that I wrote.

[m-amr]

@Masterovoi you can use

  <p class="tags">
         <span ng-repeat="item in items">
                {{item.name}}
                 <span ng-if="!$last">&nbsp;</span>
         </span>
  </p>

or

<p class="tags">
         <span ng-repeat="item in items">
                {{item.name}}
                {{ $last? '': '&nbsp;'; }}
         </span>
  </p>

I think this will print a white space between each span except the last one
does it solve your problem ?

[Masterovoi]

I'm sorry, but you will not understand the question. I need a space between adjacent tags span.

...</span> <span>...

[frfancha]

Really needing a space between spans and not at the end of span means that you depend of "something" in your css that you could probably change to solve your problem.
But what you suggest could be useful to insert br tags (or another tag) between repeated items, which can be done by ngRepeatStart/ngRepeatEnd and ngIf/$end to avoid putting one after the last one, but indeed would be more elegant with ngSeparator

[Narretz]

Since there are so many ways to achieve this result already, I'm not in favor of adding a separator. In fact, you can even achieve this with pure CSS: http://cssdeck.com/labs/ppqsob8n

[frfancha]

@Narretz: Indeed. You're right and it's better to keep Angular concise and effective.

[Masterovoi]

@Narretz:
Example http://cssdeck.com/labs/ppqsob8n does not answer my question. The separator is not necessary in span, and outside. CSS into my example does not remove the problem.

If for example add a snippet,

        span {
            background-color:   #0097D6;
            color:              white;
            border-radius:      5px;
            padding:            4px 6px 5px 6px;
        }

then there will be no separator "buttons"

[Masterovoi]

Look at the problem from your first and second examples ("here is the problem with the HTML-wrap"):
http://cssdeck.com/labs/oehgqdif

The third example - this is my version of what I need to get from the ng-repeat.

[Narretz]

I see what you mean. After elements are not good enough in this case. Still, I don't see using actual spaces to separate tags as such a good (and frequent) idea. For example, html minifiers actually remove these spaces to create smaller payloads. And I still think that CSS should be used for this, see here for example: http://jsbin.com/mofukofoxi/edit?html,css,output

[Masterovoi]

@Narretz:

1. In your example will not work before and after add text:

<p>Lorem ipsum <span>.... lorem ipsum.</p>

Sequence breaks CSS: "float"

2. I wonder how Google will treat concatenation without spaces SPANs?!

[Narretz]

Ah, you are making this very hard! :)

What do you mean by

I wonder how Google will treat concatenation without spaces SPANs?!

I assume you mean they won't be able to separate spans if they are meant to be individual units. I don't know if that is the case. I've never heard of of being a problem.

[Masterovoi]

:) Hard - is to use CSS (for spaces into text), where it is not needed.
SPAN is designed primarily for the design of text (color, size, etc.). SPAN text does not replace the space. I'm sure that Google removes SPAN when analyzing text - abcabcabc. The words in the text should be separated by spaces, or misspelled words spoil SEO.

More than 20 years, I aim to write the shortest HTML.

[gustiando]

@Masterovoi is it possible to give some additional context on the problem you're trying to solve and why the spaces are relevant and cannot be solved by CSS?

[PhillipRC]

Elements with space between them render different than elements w/o space between them. This is normal if you think about the fact we are writing into a document.

The ask is to use ng-repeat to create elements that have a space between them so they render properly in the document.

You can add space (margin) with CSS but it feels hack-ish, because the markup should/would take care of this. Which I think is why there is a want to add a feature to ng-repeat so that it can generate the markup to allow this natural feature to work.

As an example if I have a set of elements I want to put into the flow of a document using ng-repeat I need to modify the way they render rather than use proper markup to make them render.

Something like this may sort of work, but the actual spacing between elements seems to be depending on more than just 1em.

html

<div class="wrapper">
  Words <button>A</button><button>B</button>More Words
</div>

less

.wrapper {
  button {
    margin-right: 1em;
  }
}

[PhillipRC]

After playing with this the cleanest way is to create more markup and let the browser render it out. In order to make CSS work you will need to add extra markup anyway soooooo you may as well let the browser do what it does naturally and not try and fix it w/ CSS.

don't do this:

<a class="btn btn-xs" ng-repeat="item in items">
  {{item}}
</a>

do this:

<span ng-repeat="item in items">
  <a class="btn btn-xs">
    {{item}}
  </a>
</span>

[ameenross]

You can workaround this problem by using margins and whatnot, but it's not an actual solution. Also, minifiers don't remove the spaces between elements, because of the very reason that spaces have meaning. They only remove extra whitespace characters (tab, newline, space...), just like HTML does. 5 spaces in the source HTML will render as a single space (and the whitespace is explicitly visible in Firefox devtools).

Devtools:

Which renders as:

So honestly, the ng-repeat seems poorly thought out.