按给定参数划分Angular+Ionic列表

Question

我想实现一个餐厅列表。因此，我得到了一个处理json数据的服务：

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"},........

现在，在我的列表中（我使用集合重复）应该有一个属性"Ort"的分隔符。因此，每当餐厅的"Ort"是例如"Frauenfeld"时，它都应该显示一个名为"Frauefeld"的分隔符，并显示下面"Fraueffeld"中的所有餐厅。一些帮助将是惊人的！

这是我使用的收集重复指令：

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

Answer 1

Ionic提供了一个很好的例子：

Codepan中的演示

玩ng-class="item-divider"和ng-stile

---

示例

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

---

参考：

collectionRepeat