Question

我有一个如下的离子列表： 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>

我想为每列添加标题，我该如何实现？谢谢。

Answer 1

您将要使用Field而不是列表。这是我做的一个项目的例子，它做了我认为你想要做的事情：

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

然后对于交替的行颜色添加此css：

.row:nth-child(odd) {

    background-color: #CCC;

}

.row:nth-child(even) {

    background-color: white;

}

看起来像这样：

ion grid

Answer 2

您可以使用离子网格系统，也可以使用离子列表分割器。

我认为网格将解决您的问题。

如何为Ionic List添加标题？

2 个答案: