Как добавить заголовки для Ионного списка?

У меня есть список Ionic, как следующее: 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>

Я хочу, чтобы добавить заголовки для каждого столбца, как я могу добиться этого? Благодарю.

источник

2015-08-24 Isaac Li

Попробуйте осуществить путем добавления дополнительных тег, например: ORDER_ID, table_id, имя, адрес, замечание, CTime – Muhsin

@Muhsin, спасибо. теперь я получил http://i.imgur.com/fsdIj2b.png (с небольшим недостатком выравнивания), если он может быть лучше, и я хочу, чтобы стиль таблицы выглядел так: http://i.imgur.com/FKZd1dA. png, я не знаю, можно ли достичь. –

Вы хотите использовать ion grid, а не список для этого. вот пример из проекта я сделал, что делает то, что я думаю, что вы пытаетесь сделать:

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

}

выглядит следующим образом:

источник

2015-08-24 15:00:32

Спасибо, я попробую ~ –

, когда я использую ионную сетку, я нахожу, что она не может прокручиваться, как ее решить? –

Просто поместите сетку в содержимое иона –

Вы можете использовать Ionic Grid System или использовать Ionic List Dividers.

Я думаю, что решетка решит вашу проблему.

источник

2015-08-24 16:05:03

Спасибо, я попробую ~ –

Как добавить заголовки для Ионного списка?

ответ

Смежные вопросы