我正在研究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'));
}