Ionic List Syntax

ionic-v1
1

I am not sure about the syntax for the Ionic lists.

I don’t know if is the same this:

<div class="list">

  <div class="item item-divider">
    Candy Bars
  </div>

  <a class="item" href="#">
    Butterfinger
  </a>

</div>

and this:

<ion-list>
  <ion-item ng-repeat="item in items"
    item="item"
    can-swipe="true"
    option-buttons="itemButtons">
  </ion-item>
</ion-list>

both render the same, but which one should I use?

For example, I tried:

<ion-list>
    <ion-item class="item item-divider">
      Categories
    </ion-item>
    <ion-item ng-repeat="category in categories">
      {{category.name}}
    </ion-item>
  </ion-list>

And the item-divider didn’t look well, so I replace it with this:

<div class="item item-divider">
  Categories
</div>

and works.

Perhaps it’s a silly question. But can someone clarify me this, please?

Thanks!

2

ion-list is a special Ionic directive that gives you “complex” lists. These lists can have special features such as re-ordering, swipe to expose buttons, deleting, etc.

The simple class="list" are just that - lists of stuff with none of the extra functionality. I personally use the class for my lists as I never need the additional features. I’d have to assume that the extra features add some minor overhead. So, if you don’t need them, I’d suggest using the simple classes.

3

Ok, for now that I don´t need anything like that I am going to use only the class.

Thanks for the explanation.