数据标题正在包装在Ngtable AngularJs中



我正在研究AngularJS。我已经在td中创建了一个具有NGTable和data-title属性的表:

<table ng-table="orderDetails.tableParams" class="table table-hover" show-filter="true" >
    <tr ng-repeat="order in $data">
      <td  data-title="'Numéro commande'" sortable="'orderNumber'">
        {{order.orderNumber}}
      </td>
      <td data-title="'Ref restaurant'" sortable="'restaurantReference'">
        {{order.restaurantReference}}
      </td>
      <td data-title="'Ref client'" sortable="'customerReference'">
        {{order.customerReference}}
      </td>
      <td  data-title="'Montant total'" sortable="'totalAmount'">
        {{order.totalAmount}}
      </td>
  </tr>
</table>

我的问题是每个标题的文字都包装了,我不知道如何将标题在同一行中获取,因为我不应该在HTML页面上写CSS。

我已经用自动进行了bootstrap对此进行了管理。我现在想更改标题的颜色,但我不知道如何控制它。这是JavaScript代码:

     .controller('OrderDetailsCtrl', OrderDetailsCtrl);
      function OrderDetailsCtrl(orderDetailsService, $filter, NgTableParams, $scope , $templateCache) {
   var orderDetails = this;
    var data = [];
    orderDetails.getSummary = function (startdate, endate) {
    orderDetailsService.find(startdate, endate)
    .then(function(res) {
     orderDetails.summary = res.data;
      data = orderDetails.summary;
});
};
  orderDetails.getSummary($scope.$parent.filters.startdate,     $scope.$parent.filters.enddate);
       $scope.$on('filtering', function (event, filter) {
       orderDetails.getSummary(filter.startdate, filter.enddate);
});
  orderDetails.statusList=[{id: '', title: 'Tout'}, {id: 'Expirée',  title: 'Expirée'}, {id: 'Encaissée', title: 'Encaissée'}];
   orderDetails.tableParams = new NgTableParams({
   page: 1,  
   count: 5, 
    filter: {orderStatus:''},
     sorting: {orderNumber: 'asc'} 
}, {
total: data.length, 
counts:[5,10,15,20],
getData: function($defer, params) {
  // use build-in angular filter
var filteredData = params.filter() ?
$filter('filter')(data, params.filter()) :
data;
var orderedData = params.sorting() ?
$filter('orderBy')(filteredData, params.orderBy()) :
data;
params.total(orderedData.length);
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
orderDetails.countPerPage = 1;
$templateCache.put('custom/header',
                  '<tr><td colspan=12>' +
                      $templateCache.get('custom/pager') +
                  '</td></tr>' +
                  $templateCache.get('ng-table/header.html'));
 }

最新更新