AngularJS

Question

我正在使用 ng-repeat 创建一个事件列表，我希望每个事件都 link 到另一个位置，我已经成功完成了。但是，这个 ng-href 也被应用于列表分隔符，我宁愿避免这种情况。如果条件为真，有什么方法可以有条件地应用 ng-href 吗？我考虑过使用 ng-click 来处理 URL，但是事件列表项看起来不再像 link。

这是我的 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>

这样分隔线就不会像 link。

Answer 2

元："ionic ion-item conditional href"

这是我的解决方案，仅当列表项具有子元素时才有条件地具有 href。

请注意，如果设置了href，"ion-item"只是一个可点击的元素，因此不需要修改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>

AngularJS - 在 ng-repeat 的某些项目上禁用 ng-href

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

html

ionic-framework