AngularJS锚点之间的分隔符

Question

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

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

这个方法是有效的，但逗号被包含在HTML锚点内。我该如何将分隔符放在锚点外面？

解决方法

下面的代码可以实现所需的布局，但需要将每个锚点都包装在span内。如果可能的话，我想避免这样做。

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

- Logan Garland

---

你可以使用CSS的::before/::after，这样就不会使视图混乱。 - Yoshi

@Yoshi，谢谢。你带领我找到了一个全CSS的解决方案。.tags a + a:before { content: ", "; } - Logan Garland

你可以将其作为答案添加。我相信人们会发现它很有用。 - Yoshi

实际上，经过查看我的解决方案，它产生了相同的结果。逗号包含在锚标记内。因此，这并没有解决我的问题。 - Logan Garland

Answer 1

查找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>

- Christian

Answer 2

我可能来晚了，楼主可能已经弄明白了，但是你可以将分隔符添加到 <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>

- mannykary

Answer 3

您可以使用注释指令。

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

- user3093040

---

欢迎来到StackOverflow。请阅读指南http://stackoverflow.com/tour，因为这个答案太过宽泛了。当你完全阅读结束时，你甚至可以得到一个徽章;) - angabriel