угловые шаблоны: ng-repeat разделенные запятой ссылки

Question

Я действительно разочарован угловатой ... Я пытаюсь сделать довольно простой материал на уровне презентаций, и я не вижу никакого хорошего решения во время просмотра веб-страниц (и переполнения стека также).

Дело в том, что: У меня есть список элементов, с которыми я буду создавать ссылки, все они будут разделены запятыми в HTML. Скажем, это:

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

Моя ссылка должна выглядеть примерно так:

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

Легко, не так ли? Таким образом, основываясь на других SO вопросов, я попытался это:

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

, который не работает, потому что это ng-repeat уже внутри другие нг-повтор и $index, $last, $first, вероятно, пойман внешние ng-repeat значений вместо внутреннего, как я хочу.

Кроме того, мне не нравится делать однострочный HTML-код, который будет делать по 5 штук за раз, потому что [1] стоит прочитать его, а [2] легче что-то испортить, изменяя, из-за сложность. Поэтому я бы предпочел разделить это на несколько строк. Но в то же время, я не хочу пробела перед запятой, то есть el1 , el2. Он должен быть el1, el2. И последнее: запятая должна не быть в ссылке, потому что должно быть связано только имя элемента; запятая - это просто разделитель, верно?

Похоже, что в js-templating двигатели (усы, hbs и т. Д.), Python, php, ruby, все - очень тривиальный случай, и я не могу найти чистое решение в угловом режиме. Не говоря уже о том, что встроенный ng-repeat не поддерживает такую ​​фундаментальную функцию.

Answer 1

Вы можете попробовать этот код:

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

Это просто небольшая модификация формирует код, только добавил внешнюю оболочку для повторения

Answer 2

Если вы хотите, чтобы внутренний ng-repeat поймал $ last, положите $ last внутри внутреннего ng-repeat.

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