Angular ion-item repeat with 2 different href And CSS Positioning

Question

I been trying to do something like this, where clicking on the list links to a different address("#/tab/cases/case-detail/{case.ID}") and clicking on the play button goes to another address("#/tab/requests/{case.ID}").

Using ionic and angular , i have done something like this:

As you can see, it has horribly gone wrong. The "end of list line" was above the contents. It was fine till i have to insert the 2nd play button in every list contents.

Code:

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

Steps Taken To Resolve:

For the 2 different links (for the list and button): I tried, to specify the links in the inside the ion-item from how to make a cell of table hyperlink to no avail. (table cannot be clicked)

Even if the list was properly displayed, using z-index will not help as pressing on the play button will direct to ion-list's "#/tab/cases/case-detail/{{case.ID}" instead of "request"

For the css position: My reasoning was to float the table left and the "second" div right. But something has gone wrong and I do not know why. I do not have enough experience to solve this.

I know that using in-line css is not recommended, this is just the testing phase, will migrate all to stylesheet when it's done.

Would appreciate any guidance and help. Thanks!!

Update1: Changing the height to cover the whole list item and clicking on it , still doesn't work as it covers the whole area.(including the buttons)

it is happening due to `height` – Amit singh Aug 19 '15 at 08:33 — Amit singh, Aug 19 '15 at 08:33

Gaël Marziou · Accepted Answer · 2015-08-25T12:21:28.517

I'm not addressing your layout issue, only the navigation part.

Use ng-click calling methods in your controller on both ion-item and your button and on button stop event propagation.

<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();">

Your controller should look like this depending on your state definitions:

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

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

Angular ion-item repeat with 2 different href And CSS Positioning

1 Answers1