AngularJS – отключение ng-href для определенных элементов в ng-repeat

Я создаю список событий с помощью 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>

ionic-framework html angularjs
person user2884505    schedule 12.02.2015    source источник
comment
ng-click="$event.preventDefault()" на перегородке.   -  person tymeJV    schedule 13.02.2015
comment
Вы можете использовать ng-click; просто используйте CSS для оформления элемента списка событий, как если бы это была ссылка. :)   -  person rinogo    schedule 27.01.2017

Ответы (2)


arrow_upward
3
arrow_downward

Краткий ответ: Нет, не существует.

Вам нужно что-то в этом роде:

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

Таким образом, разделитель не будет вести себя и выглядеть как ссылка.

person André Werlang    schedule 12.02.2015

arrow_upward
0
arrow_downward

meta: "условный href ionic ion-item"

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

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

<ion-view view-title="Checklists">
  <ion-content>
      <ion-list>
          <div ng-repeat="item in checklists">
              
			  <!--only shown if the list has no sub lists, not clickable as there is no href-->
			  <ion-item ng-if="item.sublists === null">
                  {{item.index}}. {{item.name}}
              </ion-item>
			  
			  <!--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>
			  
          </div>
      </ion-list>
  </ion-content>
</ion-view>

person JimiSweden    schedule 20.07.2016