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

Question

在此plunk中，我有一个动态创建的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

您可以在cols数组中的每个对象上使用class属性：

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

演示plunk

Answer 2

您需要包括一个斜纹。这是一个更新的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 3

正确的方法是Matthew Cawley的答案，但是如果您想在表标头上进行其他修改，则可以知道可以更改标头的模板：

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

之后，在您的项目中添加文件table.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;
}