2014-08-27 42 views
2

我想要實現餐館列表。因此,我得到了誰處理這個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」是例如。 「弗勞恩費爾德」它應該顯示一個名爲「弗勞恩費爾德」分隔,並顯示在「弗勞恩費爾德所有餐館的下面一些幫助將是驚人的

這是集合重複指令,我用:!

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

回答

3

你有很好的例如離子提供:

演示在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