AngularJS

Question

使用 Ng-table，我尝试创建一个 table 视图，可以通过 AngularJS 参数控制。

要控制header文本，我需要把它放在data-title或ng-data-title中（例如：data-title="'Test'" )

但是，它总是使 table header 为空。

而不是填写它：

代码片段：

<td ng-repeat="v in tableSettings.data" data-title="v.name">
    {{v.data?v.data(row):row[v.id]}}
</td>

完整代码：

<table ng-table="table" class="table" show-filter="{{tableSettings.filter}}">
    <tr ng-repeat="row in $data">
        <td ng-repeat="v in tableSettings.data" ng-click="tableSettings.click(row)" ng-attr-data-title="'{{v.name}}'"
            ng-if="v.type!='switch'"
            sortable="'{{sortable?sortable:v.id}}'">
            {{v.data?v.data(row):row[v.id]}}
        </td>
    </tr>
</table

当我尝试将 Angular 解析到其中时，我只是得到错误：（按查看错误）

"'{{v.name}}'" "{{v.name}}"

有没有办法修复它，甚至可以从 AngularJS 手动解析它？

Answer 1

好的，问题是 data-title 属性用于静态文本（众所周知的列），例如 data-title="'My first column'" 如果您需要的是动态列，则必须使用 ng-table-dynamic 指令。

例如：

<table ng-table-dynamic="tableParams with cols" show-filter="true" class="table table-bordered table-striped">
  <tr ng-repeat="row in $data track by row.id">
    <td ng-repeat="col in $columns">{{::row[col.field]}}</td>
  </tr>
</table>

注意在指令声明中使用了特殊语法tablePrams with cols。这里的 cols 是一个 $scope 变量，它必须遵循以下模式才能正常工作。

$scope.cols =  [
    { title: 'ID', field: 'id', filter: { id : 'text' }, show: true, sortable: 'id' }, 
    { title: 'Installation', field: 'installationAt' },
    ...
];

标题和字段是必填项，而 filter、show、sortable 取决于您的使用场景。

你可以玩这个 code pen

AngularJS - Ng-Table 不会解析 headers

AngularJS - Ng-Table won't parse headers

javascript

ngtable