Ng-table: ¿Puedo anular solo un encabezado de tabla y no todos?

Creado en 3 mar. 2015 · 6Comentarios · Fuente: esvit/ng-table

Hola,
¿Puedo anular solo un encabezado de tabla y no todos? Quiero una tabla ordenable con una primera columna personalizada (una primera columna de casilla de verificación elegante). En este momento toda la lógica en la clasificación está en tbody > tr. No tengo thehead > th y así es como se ve mi código:

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

Y ahora mi código se ve así

<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'">

Lo hice porque seguí este ejemplo: http://bazalt-cms.com/ng-table/example/18
¿Hay alguna manera de que pueda tener una columna clasificable predeterminada simple (como solía tener en mi primer ejemplo) y tener cosas personalizadas solo en la primera? Tengo muchas columnas y las cosas clasificables repetitivas complican mucho mi código y no están SECO.

Una solución es crear mi propia directiva personalizada para el encabezado, pero esperaba que hubiera una solución más simple.

¡Gracias!

Fuente

andreicristianpetcu

Comentario más útil

Sí tu puedes.

Cree una plantilla personalizada simple como esta:

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

Luego define tu columna especial así:

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

... en lugar de esto:

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

Jeremy-Walton en 3 mar. 2015

👍3

Todos 6 comentarios

Sí tu puedes.

Cree una plantilla personalizada simple como esta:

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

Luego define tu columna especial así:

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

... en lugar de esto:

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

Jeremy-Walton en 3 mar. 2015

👍3

¡Gracias @Jeremy-Walton! Todavía no hice una implementación completa, solo un pequeño ejemplo y parece funcionar: PI analizará más cómo lo usa ng-table para poder hacer mi propio ejemplo para mi caso específico. https://github.com/esvit/ng-table/search?utf8=%E2%9C%93&q=type%3D%22text%2Fng-template%22

andreicristianpetcu en 4 mar. 2015

¿Cómo puedo pasar una variable dentro? Tengo algo como esto:

<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 en 4 mar. 2015

Todo lo que coloque en el encabezado se ejecutará en el mismo ámbito que el resto de su tabla, fuera del ciclo del cuerpo. Consulte https://github.com/esvit/ng-table/blob/master/src/ng-table/header.html#L16 y https://docs.angularjs.org/api/ng/directive/ngInclude.

En lugar de usar this.whatever , debe usar whatever .

Jeremy-Walton en 4 mar. 2015

¡Gracias!
Para la posteridad :P Esto funcionó para mí:

<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 en 4 mar. 2015

Sí tu puedes.
Cree una plantilla personalizada simple como esta:
<script id="expandAllHeader" type="text/ng-template">
  <span class="expandable" ng-click="toggleExpandAll()">+ / -</span>
</script>
Luego define tu columna especial así:
<td header="'expandAllHeader'">...</td>
... en lugar de esto:
<td data-title="'whatever'">...</td>

Maravilloso. Sigue siendo útil!!!