0

I got really disappointed with angular... I'm trying to do a quite simple presentation-layer stuff and I can see no good solution while browsing the web (and stack overflow as well).

The case is: I've got a list of elements that I will generate links to, all of them will be comma-separated in HTML. Let's say it's:

var list = [{id: 1, name: "ab"},{id:2, name: "cd"}, ...];

My link should look something like:

<a href="#/someLink/{{ el.id }}">{{ el.name }}</a>

Easy, isn't it? So, basing on other SO questions, I tried this:

<a ng-repeat="el in list" href="#/someLink/{{ el.id }}">{{ el.name }}</a>{{$last ? '' : ', '}}

which doesn't work, because this ng-repeat is already inside another ng-repeat and $index, $last, $first is probably caught by the outer ng-repeat values instead of the inner one, as I want.

Moreover, I don't like making a HTML one-liner that will do 5 things at a time, because [1] it costs to read it and [2] it's easier to mess something, while changing, because of the complexity. So I would definitely prefer to split this into more lines. But at the same time, I don't want a space before the comma, i.e. el1 , el2. It should be el1, el2. And the last thing - the comma shall not be in the link, because only the element name should be linked; comma is justa separator, right?

It seems a really trivial case todo in js-templating engines (mustache, hbs, etc.), python, php, ruby, everything - and I can't find a clean solution in angular. Not to mention that builtin ng-repeat doesn't support such fundamental feature.

ducin
  • 25,621
  • 41
  • 157
  • 256
  • your $last is outside inner ng-repeat, you need to wrap with span tag for both including tag, and use ng-repeat on that span. – YOU Apr 26 '15 at 12:41
  • 1
    @YOU Yes, and this makes the template even less readable... Anyway, this is still not the answer, since I **don't** want the comma to become a part of the link. I wrote it. – ducin Apr 26 '15 at 14:30

2 Answers2

4

Can you try this code:

<span ng-repeat="el in list">
    <a href="#/someLink/{{ el.id }}">{{ el.name }}</a>{{$last ? '' : ', '}}
</span>

It is just a slight modification form your code, just added an outer span for the repeat

shivas
  • 913
  • 10
  • 15
  • I don't like it that much, since my code is more complex in fact. And this becomes hardly readable. But it's angular issue, not a problem with your solution. – ducin Apr 26 '15 at 16:35
3

If you want inner ng-repeat to catch $last, put $last inside inner ng-repeat.

<span ng-repeat="el in list">
    <a href="#/someLink/{{ el.id }}">{{ el.name }}</a><span ng-if="!$last">, </span>
</span>
downhand
  • 395
  • 1
  • 9
  • 23
YOU
  • 120,166
  • 34
  • 186
  • 219
  • This solution doesn't satisfy `el1, el2`. It produces `el1 , el2`. Please read the question. – ducin Apr 26 '15 at 14:26
  • @tkoomzaaskz, put it in the same line then. that's about html, not related to angular. – YOU Apr 26 '15 at 14:35