必须使用模型值动态设置角度js，ngTable数据标题

Question

在角度表http://plnkr.co/edit/CBcbkc?p=preview中 ，是否可以使用其他一些列的模型值动态替换数据标题属性？

例如，在

 <td sortable="age" data-title="'Age'">
                {{user.age}}
            </td>

我想要data-title = {{user.age}}

请不要介意这个例子对于这个例子是否有意义，但在我的复杂应用程序中，我需要使用其他列值设置列标题，例如{{user.age}}, or {{user.name}} 。 本质上我不想硬编码标题，而是我想为其标题设置一些其他列值（模型值）。 我尝试了不同的方法来使用{{user.age}}替换"'Age'" ，但我的模板编译正在爆发。

我试图满足我的要求的模板样本是：

var TemplateSample = '<div class="chartsDiv"> <div class="col">  <p class="graphtitle"> Spend</p> '                         
                     + ' <table ng-table="tableParams" class="table"> <tbody ng-repeat="group in $groups"> <tr class="ng-table-group">  <td colspan="{{$columns.length}}"> '
                     + '  <a href="" ng-click="group.$hideRows = !group.$hideRows"> <span class="glyphicon" ng-class="'+ngClass12+'"></span> '
                      + ' <strong>{{ group.value }}</strong>  </a>  </td> </tr>  <tr ng-hide="group.$hideRows" ng-repeat="user in group.data"> <td sortable="spend" data-title="'+mode+'">  </td> <td sortable="service" data-title="'+service+'">  {{user.service}}  </td> '
                      + '  <td sortable="spend" data-title={{user.month1}}> {{user.percOfTotal1 | number:2}} </td>  '
                      + '   <td sortable="spend" data-title={{user.month2}}> {{user.percOfTotal2 | number:2}} </td>  '
                      + ' <td sortable="spend" data-title={{user.month3}}> {{user.percOfTotal3 | number:2}} </td>  '
                      + ' <td sortable="spend" data-title="'+month+'">  {{user.month4}} </td>  <td sortable="spend" data-title="'+percOfTotal+'"> {{user.percOfTotal4 | number:2}} </td>  '
                      + ' <td sortable="spend" data-title="'+month+'">  {{user.month5}} </td>  <td sortable="spend" data-title="'+percOfTotal+'"> {{user.percOfTotal5 | number:2}} </td>  '
                      + ' <td sortable="spend" data-title="'+month+'">  {{user.month6}} </td>  <td sortable="spend" data-title="'+percOfTotal+'"> {{user.percOfTotal6 | number:2}} </td>  '
                      + ' <td sortable="spend" data-title="'+month+'">  {{user.month7}} </td>  <td sortable="spend" data-title="'+percOfTotal+'"> {{user.percOfTotal7 | number:2}} </td>  '
                      + ' <td sortable="spend" data-title="'+month+'">  {{user.month8}} </td>  <td sortable="spend" data-title="'+percOfTotal+'"> {{user.percOfTotal8 | number:2}} </td>  '
                      + ' <td sortable="spend" data-title="'+month+'">  {{user.month9}} </td>  <td sortable="spend" data-title="'+percOfTotal+'"> {{user.percOfTotal9 | number:2}} </td>  '
                      + ' <td sortable="spend" data-title="'+month+'">  {{user.month10}} </td>  <td sortable="spend" data-title="'+percOfTotal+'"> {{user.percOfTota110 | number:2}} </td>  '
                      + '   </tr> </tbody>  </table> '              
                + '</div> </div>';

Answer 1

您可以在控制器中定义一些功能，例如

$scope.getTitle = function () {
  return 'Name';
}

然后在您的data-title属性中使用它，如下所示：

<td sortable="age" data-title="getTitle()">

扩展此功能，您可以添加一些参数，如下所示：

$scope.getTitle = function (column) {
  switch(column) {
    .../*Some logic*/
  }
}

因此，您可以将其用于不同的列，具体取决于您要执行的操作。 主要思想是这个函数必须返回String 。

此外，你应该明白你不能做这样的事情：

<td sortable="age" data-title="{{user.name}}">

你甚至不能做这样的事情：

<td sortable="age" data-title="getTitle(user.name)">

因为在ngTable你可以按行ng-repeats你的数据，所以用户将被重复，但你有唯一的标题。 它设置一次，无法更改。

演示： http ： //plnkr.co/edit/XBJLAm？p = preview

编辑

@MadasuK：我将重复：您不能根据您的user.name设置data-title 。 你可以检查下一个方法：

$scope.getTitle = function (param) {
  console.log(param, title);
  return title;
}

并在html ：

<td sortable="age" data-title="getTitle(user)">

在控制台中，您将看到调用函数getTitle时 - user未定义。

顺便说一句，我更新了我的插件，你现在可以看到我添加了button Change ，这将通过单击更改您的标题。 现在， getTitle()返回本地变量title ，单击“ Change按钮，此变量将更改，因此您的标题会更新。

希望，我回答了你的问题。

Answer 2

您可以添加标题动态：将列存储在带有标题attrib的数组项中。

$scope.columns = [
  { title: 'Name', field: 'name', visible: true, filter: { 'name': 'text' } },
  { title: 'Age', field: 'age', visible: true }
];

那么你可以使用动态表指令：

<table ng-table-dynamic="tableParams with columns" show-filter="false" class="table table-bordered table-striped">
    <tbody>
      <tr ng-repeat="user in $data">
        <td ng-repeat="col in $columns">{{user[col.field]}}</td>
      </tr>
    </tbody>
  </table>

您可以使用此示例 - 更新示例20：动态列