Ng-table: Posso substituir apenas um cabeçalho de tabela e não todos?

Criado em 3 mar. 2015 · 6Comentários · Fonte: esvit/ng-table

Oi,
Posso substituir apenas um cabeçalho de tabela e não todos? Eu quero uma tabela classificável com uma primeira coluna personalizada (uma primeira coluna de caixa de seleção sofisticada). Agora toda a lógica na ordenação está em tbody > tr. Eu não tenho thead > th e é assim que meu código se parece:

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

E agora meu código está assim

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

Fiz isso porque segui este exemplo: http://bazalt-cms.com/ng-table/example/18
Existe alguma maneira de eu ter uma coluna classificável padrão simples (como eu costumava ter no meu primeiro exemplo) e ter coisas personalizadas apenas na primeira? Eu tenho muitas colunas e o material classificável clichê complica muito meu código e não é DRY.

Uma solução é criar minha própria diretiva personalizada para o cabeçalho, mas esperava que houvesse uma solução mais simples.

Obrigada!

Fonte

andreicristianpetcu

Comentários muito úteis

Sim você pode.

Crie um modelo personalizado simples assim:

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

Em seguida, defina sua coluna especial assim:

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

... em vez disso:

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

Jeremy-Walton em 3 mar. 2015

👍3

Todos 6 comentários

Sim você pode.

Crie um modelo personalizado simples assim:

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

Em seguida, defina sua coluna especial assim:

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

... em vez disso:

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

Jeremy-Walton em 3 mar. 2015

👍3

Obrigado @Jeremy-Walton! Ainda não fiz uma implementação completa, apenas um pequeno exemplo e parece funcionar :PI vou dar uma olhada mais em como o ng-table está usando para que eu possa fazer meu próprio exemplo para o meu caso específico. https://github.com/esvit/ng-table/search?utf8=%E2%9C%93&q=type%3D%22text%2Fng-template%22

andreicristianpetcu em 4 mar. 2015

Como posso passar uma variável para dentro? Eu tenho algo assim:

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

Qualquer coisa que você colocar no cabeçalho será executada no mesmo escopo que o resto da sua tabela, fora do loop do corpo. Consulte https://github.com/esvit/ng-table/blob/master/src/ng-table/header.html#L16 e https://docs.angularjs.org/api/ng/directive/ngInclude.

Em vez de usar this.whatever , você deve usar whatever .

Jeremy-Walton em 4 mar. 2015

Obrigada!
Para a posteridade :P Isso funcionou para mim:

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

Sim você pode.
Crie um modelo personalizado simples assim:
<script id="expandAllHeader" type="text/ng-template">
  <span class="expandable" ng-click="toggleExpandAll()">+ / -</span>
</script>
Em seguida, defina sua coluna especial assim:
<td header="'expandAllHeader'">...</td>
... em vez disso:
<td data-title="'whatever'">...</td>

Maravilhoso. Ainda útil!!!