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

Question

In this 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

您需要包含一个主题。这是更新后的 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

您可以对 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; 
}

Demo Plunk

Answer 3

正确的方法是 Matthew Cawley 的回答，但如果您想对 table header 进行其他修改，知道您可以更改 [=28= 的模板是很有用的]:

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

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

How to change ngTable title colors programmatically?

angularjs

ngtable