AngularJS - Отключение ng-href на некоторых элементах в ng-repeat

Question

Я создаю список событий, используя ng-repeat, и я хотел бы, чтобы каждое событие связывалось с другим местоположением, которое я сделал успешно. Однако этот ng-href также применяется к разделителям списков, чего я бы предпочел избежать. Есть ли способ условно применить ng-href, если условие истинно? Я подумал об использовании ng-click вместо этого и о том, что обрабатывает URL-адрес, но затем элемент списка событий больше не будет выглядеть ссылкой.

Вот мой HTML до сих пор.

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

Короткий ответ: Нет, нет.

Вам нужно что-то вдоль этих линий:

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

Этот способ делитель не будет вести себя и не выглядеть как ссылка.

Answer 2

мета: «ионный ион-вещь условного HREF»

Это мое решение условно иметь HREF только если элемент списка содержит вложенные элементы.

Обратите внимание, что «ионный элемент» является только элементом, который можно щелкнуть, если установлен href, поэтому нет необходимости изменять классы css.

<ion-view view-title="Checklists"> 
 
    <ion-content> 
 
     <ion-list> 
 
      <div ng-repeat="item in checklists"> 
 
       
 
\t \t \t <!--only shown if the list has no sub lists, not clickable as there is no href--> 
 
\t \t \t <ion-item ng-if="item.sublists === null"> 
 
        {{item.index}}. {{item.name}} 
 
       </ion-item> 
 
\t \t \t 
 
\t \t \t <!--only shown if the list has sub lists, clickable --> 
 
       <ion-item ng-if="item.sublists !== null" href="#/app/checklists/{{item.id}}/sublists"> 
 
        {{item.index}}. {{item.name}} 
 
        <span class="item-note" style="margin-right: -33px;"> 
 
         <i class="icon ion-chevron-right"></i> 
 
        </span> 
 
       </ion-item> 
 
\t \t \t 
 
      </div> 
 
     </ion-list> 
 
    </ion-content> 
 
</ion-view>