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

meta：＆＃34;离子离子项条件href＆＃34;

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

请注意＆＃34; ion-item＆＃34;如果设置了href，则只是一个可单击的元素，因此不需要修改css类。

＆＃13;

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

＆＃13;

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

2 个答案: