javascript - Angular js，必须使用模型值动态设置 ngTable 数据标题

Question

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

例如，在

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

我想要类似data-title = {{user.age}}的东西

如果这个要求对这个例子没有意义请不要介意，但在我复杂的应用程序中，我需要用其他一些列值设置列标题，比如 {{user.age} }，或 {{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

你可以在你的 Controller 中定义一些函数，比如

$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 未定义。

顺便说一下，我更新了我的 plunk，你现在可以看到我添加了 button Change 它将通过点击更改你的标题。现在 getTitle() 返回局部变量 title 并通过单击 Change 按钮更改此变量，因此您的标题已更新。

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