CODEWITHSUNDEEP
angularjsionic-framework
m1crdy
m1crdy

Reputation: 1401

Angular + Ionic list divider by given parameter

I´d like to implement a list of restaurants. Therefore I got a service who handles this json data:

var restaurants = [
{"ID":1,"Name":"Restaurant 5","Ort":"Frauenfeld"},
{"ID":2,"Name":"Restaurant Ban Kinnaree","Ort":"Diessenhofen"},
{"ID":3,"Name":"Falken – Pub, Bar, Restaurant & Motel","Ort":"Frauenfeld"},
{"ID":4,"Name":"Gasthaus zum goldenen Kreuz","Ort":"Frauenfeld"},........

Now In my list (I use collection repeat) there should be a divider for the attribute "Ort". So everytime when the "Ort" of the restaurant is eg. "Frauenfeld" it should show a divider named "Frauenfeld" and show all restaurants in "Frauenfeld underneath. Some help would be amazing!

this is the collection repeat directive I use:

<div class="list">
    <a class="item my-item"
      collection-repeat="restaurant in restaurants | filter:searchText"
      collection-item-width="'100%'"
      collection-item-height="getItemHeight(item, $index)"
      ng-style="{height: getItemHeight(item, $index)}"
      ng-href="#/detail/{{restaurant.ID-1}}">
      {{restaurant.Name}}
      <p>{{restaurant.Ort}}</p>
    </a>
  </div>

Upvotes: 2

Views: 1986

Answers (1)

Maxim Shoustin
Maxim Shoustin

Reputation: 77904

You have good example Ionic provides:

Demo in Codepan

Play with ng-class="item-divider" and ng-stile

Example

<ion-content>
    <div class="list">
      <a class="item my-item"
        collection-repeat="item in getContacts()"
        collection-item-height="getItemHeight(item)"
        collection-item-width="getItemWidth(item)"
        ng-href="https://www.google.com/#q={{item.first_name + '+' + item.last_name}}"
        ng-style="{'line-height': getItemHeight(item) + 'px'}"
        ng-class="{'item-divider': item.isLetter}">
        <img ng-if="!item.isLetter" ng-src="http://placekitten.com/60/{{55 + ($index % 10)}}">
        {{item.letter || (item.first_name+' '+item.last_name)}}
      </a>
    </div>
  </ion-content>

Reference:

collectionRepeat

Upvotes: 3

Related Questions