Karl Gjertsen Karl Gjertsen - 6 months ago 12
AngularJS Question

Adding a HTML tag to an ng-repeat block

I am trying to add a block of HTML to a

ng-repeat
block. the idea is to build up a breadcrumb trail, with a chevron between each item.

<div class="pull-left breadcrumbs">
<span ng-repeat="crumb in breadcrumbs">
{{crumb.display}} {{$last ? '' : '<span class=\'fa fa-chevron-right\'></span>'}}
</span>
</div>


However, this does not render as expected.

I have also tried changing the single quotes for double quotes in the
class=
part of the HTML.

Answer

you can do it with the ng-hide directive. This directive hides an element, if the expression evaluates to true.

<div class="pull-left breadcrumbs">
    <span ng-repeat="crumb in breadcrumbs">
        {{crumb.display}} 
        <span class="fa fa-chevron-right" ng-hide="$last"></span>
    </span>
</div>

or you could use the ng-if directive.

<div class="pull-left breadcrumbs">
    <span ng-repeat="crumb in breadcrumbs">
        {{crumb.display}} 
        <span class="fa fa-chevron-right" ng-if="!$last"></span>
    </span>
</div>