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您按行data-title数据，所以会重复用户，但您拥有唯一标题。它设置一次，无法更改。

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

修改

@MadasuK：我会重复一遍：根据您的user.name设置$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，点击{{1}}按钮会更改此变量，因此您的标题会更新。

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

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>

您可以使用此示例 - Updated Example 20: Dynamic columns

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

2 个答案:

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

修改