Clever Geek Handbook

AngualrJS separator between anchors

I am trying to take both an array of strings and output them as an inline list of html anchors (clickable tags). Here's the code I have.

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

This works, but the comma is included inside the html binding. How can I put the separator outside the anchor?

DECISION

The code below will give the desired layout, but requires each anchor to be wrapped in between. I would like to avoid this if possible.

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


source to share


3 answers


Search ng-repeat-start and 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>
+1


source


You can use the comment directive.



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


source


I'm probably late to the party and the OP probably figured it out by now, but you can add a separator to <span>

and set ng-if

to <span>

hidden if we're the last item on it:

<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>
0


source






More articles:


All Articles