Ng-table: すべてではなく、1つのテーブルヘッダーだけをオーバーライドできますか？

作成日 2015年03月03日 · 6コメント · ソース: esvit/ng-table

こんにちは、
すべてではなく、1つのテーブルヘッダーだけをオーバーライドできますか？カスタムの最初の列（派手なチェックボックスの最初の列）を持つ並べ替え可能なテーブルが必要です。現在、ソートのすべてのロジックは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: すべてではなく、1つのテーブルヘッダーだけをオーバーライドできますか？

最も参考になるコメント

全てのコメント6件

関連する問題