Ng-repeat <ion-item> links fine, but not <div class="card">

ionic-v1
1

Hi I’m trying to repeat a set of cards and have them linked to a specific ID.

Why is this bad?

<div class="card" ng-repeat="chat in chats" type="item-text-wrap" href="#/tab/chats/{{chat.id}}">
//Content
</div>

And this ok?

<ion-item class="" ng-repeat="chat in chats" type="item-text-wrap" href="#/tab/chats/{{chat.id}}">
//content
</ion-item
2

You should have item inside your <DIV> card. Take a look at this following code :

<div class="card">
   <div class="item" ng-repeat="chat in chats" type="item-text-wrap" href="#/tab/chats/{{chat.id}}"></div>
</div>
1 Like
3

<ion-item> is an angular directive, when you write the following:

<ion-item class="item-text-wrap" ng-repeat="item in items" href="#/tab/items/{{item.id}}">
    Item {{item.id}}
</ion-item>

it becomes this:

<ion-item class="item-text-wrap item item-complex" ng-repeat="item in items" href="#/tab/items/1">    
    <a class="item-content ng-binding" ng-href="#/tab/items/1" href="#/tab/items/1">
       Item 1
    </a>
</ion-item>

Note that I changed type="item-text-wrap" to class="item-text-wrap". Type is not a valid attribute on the ion-item.

You can see that the ion-item directive is generating an anchor tag inside of it. Your div with the card class will not generate an anchor tag.

You can use the ion-item tag and give it the card class, like this:

<ion-item class="item-text-wrap card" ng-repeat="item in items" href="#/tab/items/{{item.id}}">
    Item {{item.id}}
</ion-item>

See this codepen: http://codepen.io/brandyshea/pen/rVZGjq?editors=101