如何以编程方式更改ngTable标题颜色？

Question

​​我有一个动态创建的ngTable，设置每列的行颜色。如何更改列标题的颜色？

HTML：

<table ng-table-dynamic="tableParams with cols" class="table table-bordered table-hover"> 
    <tr ng-repeat="row in data"> 
     <td ng-repeat="col in cols" ng-style="{ 'color': col.color }">{{row[col.nm]}}</td> 
    </tr> 
</table> 

的Javascript：

var app = angular.module('app', ['ngTable']); 

app.controller('myCtl', function($scope,NgTableParams) { 

     $scope.cols = [ 
     {nm:'uid', title:'User ID', color: 'blue'}, 
     {nm:'ugr', title: 'Group ID', color: 'red'} 
     ]; 


     $scope.data = [ 
     { uid: 'aaa',ugr: '222'}, 
     { uid: 'bbb', ugr: '111'} 
     ]; 

     $scope.tableParams = new NgTableParams({dataset: $scope.data}); 

}); 

Answer 1

您需要包括一个THEAD。这里是一个更新Plunker

<table ng-table-dynamic="tableParams with cols" class="table table-bordered table-hover"> 
    <thead> 
     <tr> 
      <th ng-repeat="col in cols" ng-style="{ 'color': col.color }">{{col.title}}</th> 
     </tr> 
    </thead> 
    <tr ng-repeat="row in data"> 
     <td ng-repeat="col in cols" ng-style="{ 'color': col.color }">{{row[col.nm]}}</td> 
    </tr> 
</table> 

Answer 2

您可以使用每个对象的class财产在你cols阵列：

$scope.cols = [ 
    {nm:'uid', title:'User ID', class: 'text-blue' }, 
    {nm:'ugr', title: 'Group ID', class: 'text-red'} 
]; 

然后设置相应的CSS类在样式表：

.text-blue{ 
    color: #0000ff; 
} 

.text-red{ 
    color: #ff0000; 
} 

Demo Plunk

Answer 3

正确的方式做到这一点是马修·考利的答案，但如果你想要做的表头额外的修改是非常有用的知道，你可以更改模板标题：后加

http://plnkr.co/edit/662FYVbJyz2wxqXV5nNk?p=preview

<table template-header="table-header.html" ng-table-dynamic="tableParams with cols" class="table table-bordered table-hover"> 

文件中包含该项目表了header.html：

<tr> 
    <th title="{{$column.headerTitle(this)}}" 
     ng-repeat="$column in $columns" 
     ng-class="{ 
        'sortable': $column.sortable(this), 
        'sort-asc': params.sorting()[$column.sortable(this)]=='asc', 
        'sort-desc': params.sorting()[$column.sortable(this)]=='desc', 
        }" 
     ng-click="sortBy($column, $event)" 
     ng-if="$column.show(this)" 
     ng-init="template = $column.headerTemplateURL(this)" 
     class="header {{$column.class(this)}} {{$column.headerClass}}"> 
     <div ng-if="!template" class="ng-table-header" ng-class="{'sort-indicator': params.settings().sortingIndicator == 'div'}"> 
      <span ng-bind="$column.title(this)" ng-class="{'sort-indicator': params.settings().sortingIndicator == 'span'}"></span> 
     </div> 
     <div ng-if="template" ng-include="template"></div> 
    </th> 
</tr> 

在你的代码

则：

$scope.cols = [ 
     {nm:'uid', title:'User ID', headerClass: 'blue'}, 
     {nm:'ugr', title: 'Group ID', headerClass: 'red'} 
     ]; 

也不要忘了CSS类：

.red { 
    color: red; 
} 
.blue { 
    color: blue; 
}