离子可点击项目图标

Question

我已经建立了一个列表卡，每行有 2 个图标。如何在不丢失列表布局的情况下使图标可点击？我试图给图标元素一个 ng-click，但它不起作用。如果我用 div 包围它们，我就会失去列表的布局。

<div class="list card">
  <div ng-repeat="destination in destinations | isActive">
    <div class="item item-divider">
      <span>{{title}}</span>
    </div>
    <a href="#" class="item item-icon-left item-icon-right item-balanced">
      <i class="icon ion-ios-home"></i>
      <div>
        <div>{{text1}}</div>
        <div><b>{{text2}}</b></div>
        <div>{{text3()}}</div>
        <div>{{text4()}}</div>
      </div>
      <i class="icon ion-ios-filing"></i>
    </a>
  </div>
</div>

我想用左右两个图标保持这种布局：

Answer 1

在离子 3 中

<ion-card class="border-top" (click)="eventDetail(event.id)">
        <ion-card-content>
          <ion-card-title>
            {{ event.title }} <ion-badge color="primary"> {{ event.date | date : "MMMM d, yyyy - HH:mm"}}</ion-badge>
          </ion-card-title>
          <p>
            {{ event.description }}
          </p>
        </ion-card-content>
      </ion-card>

其中 eventDetail 是相应类中的函数，eventId 是您要传递的值。

Answer 2

把你的link标签变成div标签，你的i标签应该是一个链接标签。为图标添加一点 CSS。很高兴。

(Demo)

HTML

<div class="list card">
    <div ng-repeat="destination in destinations | isActive">
        <div class="item item-divider">
            <span>{{title}}</span>
        </div>
        <div class="item item-icon-left item-icon-right item-balanced">
            <a href="#" class="icon ion-ios-home"></a>
            <div>
                <div>{{text1}}</div>
                <div><b>{{text2}}</b>
                </div>
                <div>{{text3()}}</div>
                <div>{{text4()}}</div>
            </div>
            <a href="" class="icon ion-ios-filing"></a>
        </div>
    </div>
</div>

CSS

.icon {
    color: inherit;
    text-decoration: none;
}