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”它应该展示一个名为“Frauenfeld”的分隔线，并在“Frauenfeld”下面展示所有餐厅。一些帮助会很棒！

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

<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

Angular + Ionic列表分隔符由给定参数组成

1 个答案: