javascript - 使用 2 个不同的 href 和 CSS 定位重复 Angular ion-item

Question

我一直在尝试做这样的事情，点击列表链接到不同的地址(“#/tab/cases/case-detail/{case.ID}”)然后点击播放按钮转到另一个地址(“#/tab/requests/{case.ID}”)。

使用 ionic 和 angular ，我做了这样的事情:

如您所见，它出现了可怕的错误。 “列表行的结尾”在内容之上。很好，直到我必须在每个列表内容中插入第二个播放按钮。

代码:

<ion-list>
<ion-item ng-repeat="case in cases" class ="item-text-wrap" 
href="#/tab/cases/case-detail/{{case.ID}}">

<table style="width:80%; float:left;">
<tr>
    <td><strong>DoorID: </strong></td>
    <td style="padding:3px">{{case.DoorCode}}</td>
</tr>
<tr>
    <td><strong>Address: </strong> </td>
    <td style="border-spacing:3px">{{case.Address}}</td>
</tr>
<tr>
    <td> <strong>Remark: </strong></td>
    <td style="padding:3px">{{case.Remark}}</td>
</tr>
<tr>
    <td><strong>Status:</strong></td>
    <td style="padding:3px">{{case.Status}}</td>
</tr>
</table>

 <div class="second" style="width:15%; float:right;">
<input type="image" style="width:50%; z-index:999;" src="img/icon_play.png"
  onlick="#/tab/requests/{case.ID}">
 </div>

  </ion-item>
</ion-list>

解决问题的步骤:

对于 2 个不同的链接(对于列表和按钮):我试过，从 how to make a cell of table hyperlink 指定 ionic 元素内部的链接无济于事。 (表格无法点击)

即使列表已正确显示，使用 z-index 也无济于事，因为按下播放按钮将指向 ion-list 的“#/tab/cases/case-detail/{{case.ID} "而不是 "请求"

对于CSS位置:我的理由是将表格向左浮动，将“第二个”div 向右浮动。但是出了点问题，我不知道为什么。我没有足够的经验来解决这个问题。

我知道不推荐使用内联 css，这只是测试阶段，完成后将全部迁移到样式表。

将不胜感激任何指导和帮助。谢谢!!

Update1:更改高度以覆盖整个列表项并单击它，仍然不起作用，因为它覆盖了整个区域。(包括按钮)

Answer 1

我不是在解决您的布局问题，只是导航部分。

在 Controller 中对 ion-item 和按钮以及按钮停止事件传播使用 ng-click 调用方法。

<ion-item ng-repeat="case in cases" class ="item-text-wrap" 
ng-click="goToCase(case)">

<input type="image" style="width:50%; z-index:999;" src="img/icon_play.png"
  ng-click="goToRequests(case); $event.stopPropagation();">

根据您的状态定义，您的 Controller 应该如下所示:

$scope.goToCase = function (case) {
    $state.go('case', {id: case.ID});
}

$scope.goToRequests = function (case) {
    $state.go('requests', {id: case.ID});
}