How to add headers for an Ionic List? - angularjs

Question

I have an Ionic list like following:
http://i.imgur.com/V0NBvQ3.png
<ion-content>
<ion-list>
<ion-item ng-repeat="x in names|orderBy:'order_id'">
{{ x.order_id + ', ' + x.table_id+', '+x.name+', '+x.phone+', '+x.address+', '+x.remark+', '+changTimetoString(x.ctime)}}
<button onclick="myFunction()">点击这里</button>
</ion-item>
</ion-list>
</ion-content>
I want to add headers for each column, how can I achieve that? thanks.

Answer 1

You are going to want to use the ion grid rather than a list for this. here is a example from a project I made that does what I think you are trying to do:
<div class="list">
<div style="padding: 0px; margin: 0px;" class="item">
<div class="row" style="background-color:#284f9a !important; color: white !important;">
<div class="col left" >
Driver:
</div>
<div class="col center" ng-click="reverse=!reverse; data.metric = 'MPG'">
MPG
<i class="icon" ng-class="{'ion-arrow-down-b': reverse == true && data.metric == 'MPG', 'ion-arrow-up-b': reverse == false && data.metric == 'MPG'}"></i>
</div>
<div class="col right" ng-click="reverse=!reverse; data.metric = 'Miles'">
Miles
<i class="icon" ng-class="{'ion-arrow-down-b': reverse == true && data.metric == 'Miles', 'ion-arrow-up-b': reverse == false && data.metric == 'Miles'}"></i>
</div>
</div>
<div class="row" ng-repeat="item in leaderboardData | orderBy:data.metric:reverse">
<div class="col left">
{{item.Driver}}
</div>
<div class="col center">
{{item.MPG}}
</div>
<div class="col right">
{{item.Miles}}
</div>
</div>
</div>
Then for the alternating row colors add this css:
.row:nth-child(odd) {
background-color: #CCC;
}
.row:nth-child(even) {
background-color: white;
}
looks like this:

Answer 2

You can use either Ionic Grid System, or you can use Ionic List Dividers.
I think the grid will solve you problem.