Ng-table: 我可以只覆盖一个表头而不是全部吗？

创建于 2015-03-03 · 6评论 · 资料来源: esvit/ng-table

你好，
我可以只覆盖一个表头而不是全部吗？我想要一个带有自定义第一列（一个花哨的复选框第一列）的可排序表。现在排序中的所有逻辑都在 tbody > tr 中。我没有thead > th，这就是我的代码的样子：

<tbody>
  <tr ng-repeat="foo in fooList">
    <td data-title="'Name'" class="" data-sortable="'name'">

现在我的代码看起来像这样

<thead>
<!--custom first column header-->
<!--boilerplate header-->
  <th ng-class="{
    'sort-asc': tableParams.isSortBy('name', 'asc'),
    'sort-desc': tableParams.isSortBy('name', 'desc')
    }"
    ng-click="tableParams.sorting({'name' : tableParams.isSortBy('name', 'asc') ? 'desc' : 'asc'})">
    <div>Name</div>
  </th>
<!--the rest of the column definitions which are similar to the previous one-->
</thead>
<tbody>
  <!--custom first column data-->
  <tr ng-repeat="foo in fooList">
    <td data-title="'Name'" class="" data-sortable="'name'">

我这样做是因为我遵循了这个例子： http ://bazalt-cms.com/ng-table/example/18
有什么办法可以让我拥有一个简单的默认可排序列（就像我在第一个示例中使用的那样）并且仅在第一个中拥有自定义内容？我有很多列，样板可排序的东西使我的代码复杂很多，而且它不是 DRY。

一种解决方法是为标题制作我自己的自定义指令，但我希望有一个更简单的解决方案。

谢谢！

资料来源

andreicristianpetcu

最有用的评论

是的你可以。

创建一个简单的自定义模板，如下所示：

<script id="expandAllHeader" type="text/ng-template">
  <span class="expandable" ng-click="toggleExpandAll()">+ / -</span>
</script>

然后像这样定义您的特殊列：

<td header="'expandAllHeader'">...</td>

...而不是这个：

<td data-title="'whatever'">...</td>

Jeremy-Walton 于 2015-03-03

👍3

所有6条评论

是的你可以。

创建一个简单的自定义模板，如下所示：

<script id="expandAllHeader" type="text/ng-template">
  <span class="expandable" ng-click="toggleExpandAll()">+ / -</span>
</script>

然后像这样定义您的特殊列：

<td header="'expandAllHeader'">...</td>

...而不是这个：

<td data-title="'whatever'">...</td>

Jeremy-Walton 于 2015-03-03

👍3

谢谢@Jeremy-Walton！我还没有完全实现，只是一个小例子，它似乎有效：PI 将更多地看看 ng-table 是如何使用它的，所以我可以为我的具体情况制作我自己的例子。 https://github.com/esvit/ng-table/search?utf8=%E2%9C%93&q=type%3D%22text%2Fng-template%22

andreicristianpetcu 于 2015-03-04

我怎样才能在里面传递一个变量？我有这样的事情：

<script id="expandAllHeader" type="text/ng-template">
  <div>{{this.title}}</div>
  <div>{{this.sorting}}</div>
</script>

<td data-title="'Name'" data-sortable="'name'" header="'expandAllHeader'"></td>

andreicristianpetcu 于 2015-03-04

您放入标题中的任何内容都将在与表的其余部分相同的范围内执行，在主体循环之外。请参阅https://github.com/esvit/ng-table/blob/master/src/ng-table/header.html#L16和https://docs.angularjs.org/api/ng/directive/ngInclude。

而不是使用this.whatever ，您应该使用whatever 。

Jeremy-Walton 于 2015-03-04

谢谢！
对于后代：P 这对我有用：

<script id="expandAllHeader" type="text/ng-template">
  <div>{{column.title()}}</div>
  <div>{{column.sortable()}}</div>
</script>
<table ng-table="tableParams">
  <tbody>
    <td data-title="'First Name'" data-sortable="'firstname'" header="'expandAllHeader'"></td>
    <td data-title="'Last Name'" data-sortable="'lastname'" header="'expandAllHeader'"></td>

andreicristianpetcu 于 2015-03-04

是的你可以。
创建一个简单的自定义模板，如下所示：
<script id="expandAllHeader" type="text/ng-template">
  <span class="expandable" ng-click="toggleExpandAll()">+ / -</span>
</script>
然后像这样定义您的特殊列：
<td header="'expandAllHeader'">...</td>
...而不是这个：
<td data-title="'whatever'">...</td>

精彩的。还是有用的！！！

vcmiranda 于 2019-02-27

此页面是否有帮助？

0 / 5 - 0 等级

Ng-table: 我可以只覆盖一个表头而不是全部吗？

最有用的评论

所有6条评论

相关问题