Ng-table: Могу ли я переопределить только один заголовок таблицы, а не все?

Созданный на 3 мар. 2015 · 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 3 мар. 2015

👍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 3 мар. 2015

👍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 4 мар. 2015

Как я могу передать переменную внутри? У меня есть что-то вроде этого:

<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 4 мар. 2015

Все, что вы поместите в заголовок, будет выполняться в той же области, что и остальная часть вашей таблицы, вне основного цикла. См. 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 4 мар. 2015

Спасибо!
Для потомков: 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 4 мар. 2015

Да, ты можешь.
Создайте простой пользовательский шаблон, например:
<script id="expandAllHeader" type="text/ng-template">
  <span class="expandable" ng-click="toggleExpandAll()">+ / -</span>
</script>
Затем определите свой специальный столбец следующим образом:
<td header="'expandAllHeader'">...</td>
... вместо этого:
<td data-title="'whatever'">...</td>

Чудесно. Еще пригодится!!!