角度模板：ng-repeat 逗号分隔的链接答案

【问题标题】：angular templating: ng-repeat comma-separated links角度模板：ng-repeat 逗号分隔的链接
【发布时间】：2015-04-26 10:22:49
【问题描述】：

我对 Angular 感到非常失望......我正在尝试做一个非常简单的表示层的东西，但在浏览网页时我看不到好的解决方案（以及堆栈溢出）。

情况是：我有一个要生成链接的元素列表，所有这些元素都将在 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 已经在另一个 ng-repeat 中，并且 $index、$last、$first 可能被外部 ng-repeat 值而不是内部值捕获，因为我要。

此外，我不喜欢制作一个一次性完成 5 件事情的 HTML 单行代码，因为 [1] 阅读它需要花费 [2] 在更改时更容易弄乱一些东西，因为复杂。所以我肯定更愿意把它分成更多的行。但是同时，我不希望逗号前有空格，即el1 , el2。应该是el1, el2。最后一件事 - 逗号应该不在链接中，因为只有元素名称应该被链接；逗号只是一个分隔符，对吧？

在 js 模板引擎（mustache、hbs 等）、python、php、ruby 等所有东西中，这似乎是一个非常微不足道的案例 - 我在 angular 中找不到一个干净的解决方案。更不用说内置的ng-repeat 不支持这样的基本功能。

【问题讨论】：

你的 $last 在内部 ng-repeat 之外，你需要用 span 标签包装包括标签，并在该 span 上使用 ng-repeat。
@YOU 是的，这使得模板的可读性更差......无论如何，这仍然不是答案，因为我不希望逗号变成链接的一部分。我写的。

标签： javascript angularjs templates angularjs-directive

【解决方案1】：

你能试试这个代码吗：

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

这只是对您的代码的轻微修改，只是为重复添加了一个外部跨度

【讨论】：

我不太喜欢它，因为我的代码实际上更复杂。这变得难以阅读。但这是角度问题，而不是您的解决方案的问题。

【解决方案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>

【讨论】：

这个解决方案不满足el1, el2。它产生el1 , el2。请阅读问题。
@tkoomzaaskz，然后把它放在同一行。那是关于html的，与角度无关。