user2884505 user2884505 - 4 months ago 40
HTML Question

AngularJS - Disabling ng-href on certain items in ng-repeat

I'm creating a list of events using ng-repeat, and I'd like each event to link to another location, which I've done successfully. However, this ng-href is also being applied to list dividers, which I'd rather avoid. Is there any way to conditionally apply a ng-href if a condition is true? I thought about using ng-click instead and having that handle the URL, but then the event list item won't look like a link anymore.

Here's my HTML thus far.

<ion-item class="item" ng-class="{'item-divider': isDivider(event), 'item-icon-right': !isDivider(event)}" ng-repeat="event in events" ng-href="#/app/{{channel}}/{{event.id}}">
<h2>{{event.title}}</h2>
<p ng-if="valid(event.start_date)">{{showDate(event.start_date)}}</p>
<i ng-if="!isDivider(event)" class="icon ion-chevron-right"></i>
</ion-item>

Answer

Short answer: No, there isn't.

You need something along these lines:

<ion-item class="item" ng-class="{'item-divider': isDivider(event), 'item-icon-right': !isDivider(event)}" ng-repeat="event in events">
  <div ng-if="!isDivider(event)" ng-href="#/app/{{channel}}/{{event.id}}">
    <h2>{{event.title}}</h2>
    <p ng-if="valid(event.start_date)">{{showDate(event.start_date)}}</p>
    <i class="icon ion-chevron-right"></i>
  </div>
  <div ng-if="isDivider(event)">
    <h2>{{event.title}}</h2>
    <p ng-if="valid(event.start_date)">{{showDate(event.start_date)}}</p>
  </div>
</ion-item>

This way a divider won't behave nor look like a link.

Comments