1

I searched a lot but could not find.

Here is my html

<li ng-repeat="tmp in list" ng-class="{active: $last}">
    <a href="#{{tmp.url}}">{{tmp.text}}</a>
</li>

It is working fine. But what I want is for the last item in ng-repeat, I don't want to add the <a> tag. I want in the following way

<li ng-repeat="tmp in list" class="active">
    {{tmp.text}}
</li>

For the class="active" I added using ng-class="{active: $last}", But for this without <a> tag, how to add?

iCode
  • 8,892
  • 21
  • 57
  • 91

3 Answers3

5

You can do it following way:

<li ng-repeat="tmp in list" ng-class="{active: $last}" ng-switch="$last">
    <span ng-switch-when="true">{{tmp.text}}</span>
    <a href="#{{tmp.url}}" ng-switch-default>{{tmp.text}}</a>
</li>

Here's a link to working fiddle: http://jsfiddle.net/zFH4Y/

coquin
  • 1,338
  • 1
  • 13
  • 22
4

You can always use ng-show="!$last" on the <a>. This means it wouldn't show it for the last element.

Alternatively, you could create a directive that only compiles the content based on some value (!$last). This is an approach that would work if you didn't want to add the actual tag to the dom at all, as opposed to just hiding it.

Hope this helped!

hassassin
  • 5,024
  • 1
  • 29
  • 38
  • Thanks. But it hides the text also. I just want to remove the link only. I added `{{tmp.text}}` Is that the only way? – iCode Jan 28 '14 at 07:44
  • You could maybe disable it through a css class. ng-class="{disabled: $last}". Take a look at this: http://stackoverflow.com/questions/2091168/disable-a-link-using-css – hassassin Jan 28 '14 at 07:49
0

Not as elegant as the other solutions, but you can iterate thru until the 2nd to last element of the array, then manually do the last element without the a tag

<li ng-repeat="tmp in list.slice(0,list.length-1)">
    <a href="#{{tmp.url}}">{{tmp.text}}</a>
</li>
<li class="active">
    {{list[list.length-1].text}}
</li>
Foo L
  • 10,977
  • 8
  • 40
  • 52