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

您可以在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 2

你需要包含一个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 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-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标题颜色？

3 个答案: