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