锚点之间的 Angular JS 分隔符答案

【问题标题】：AngualrJS delimiter between anchors锚点之间的 Angular JS 分隔符
【发布时间】：2015-01-01 22:46:58
【问题描述】：

我正在尝试获取字符串数组并将它们输出为 html 锚点（可点击标签）的内联列表。这是我目前拥有的代码。

<div class="tags">Tags: 
    <a ng-click="searchByTag(tag)" ng-repeat="tag in obj.Tags">
        {{tag}}{{$last ? '' : ', '}}
    </a>
</div>

这可行，但逗号包含在 html 锚中。我将如何将分隔符放在锚点之外？

解决方法

下面的代码将给出所需的布局，但需要将每个锚点包裹在一个跨度中。如果可能的话，我想避免这种情况。

<span ng-repeat="tag in obj.Tags">
    <a ng-click="searchByTag(tag)">{{tag}}</a>{{$last ? '' : ', '}}
</span>

【问题讨论】：

您可以使用 css ::before/::after，这样您就不必弄乱视图了。
@Yoshi，谢谢。你把我带到了一个全 CSS 的解决方案。 .tags a + a:before { content: ", "; }
您可以将其添加为答案。我相信人们会发现它很有用。
其实。在查看我的解决方案后，它会产生相同的结果。逗号包含在锚标记内。所以这并不能解决我的问题。

标签： javascript html css angularjs angularjs-ng-repeat

【解决方案1】：

我可能迟到了，OP 可能已经弄清楚了，但是您可以将分隔符添加到 <span> 并在 <span> 上设置 ng-if 以便在我们打开时隐藏最后一个元素：

<div class="tags">Tags: 
  <a ng-click="searchByTag(tag)" ng-repeat-start="tag in obj.Tags">
    {{tag}}
  </a>
  <span ng-repeat-end ng-hide="$last">{{', '}}</span>
</div>

【讨论】：

【解决方案2】：

您可以使用评论指令。

<div class="tags">Tags: 
    <!-- directive: ng-repeat tag in obj.Tags -->
    <a ng-click="searchByTag(tag)">
        {{tag}}
    </a>
    {{$last ? '' : ', '}}
    <!-- /ng-repeat -->
</div>

【讨论】：

欢迎来到 StackOverflow。请阅读指南stackoverflow.com/tour，因为这个答案太宽泛了。当你完全阅读到最后时，你甚至会得到一个徽章；）

【解决方案3】：

查找 ng-repeat-start 和 ng-repeat-stop：link

<div class="tags">Tags: 
        <a ng-click="searchByTag(tag)" ng-repeat-start="tag in obj.Tags">
            {{tag}}
        </a>
       <span ng-repeat-stop>{{$last ? '' : ', '}}</span>
</div>

【讨论】：