Ng-table: Kann ich nur einen Tabellenkopf überschreiben und nicht alle?

Erstellt am 3. März 2015 · 6Kommentare · Quelle: esvit/ng-table

Hallo,
Kann ich nur einen Tabellenkopf überschreiben und nicht alle? Ich möchte eine sortierbare Tabelle mit einer benutzerdefinierten ersten Spalte (eine ausgefallene erste Spalte mit Kontrollkästchen). Im Moment befindet sich die gesamte Sortierlogik in tbody > tr. Ich habe kein thead > th und so sieht mein Code aus:

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

Und jetzt sieht mein Code so aus

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

Ich tat dies, weil ich diesem Beispiel gefolgt bin: http://bazalt-cms.com/ng-table/example/18
Gibt es eine Möglichkeit, eine einfache sortierbare Standardspalte zu haben (wie ich sie in meinem ersten Beispiel hatte) und benutzerdefinierte Inhalte nur in der ersten zu haben? Ich habe viele Spalten und die sortierbaren Boilerplate-Sachen verkomplizieren meinen Code sehr und es ist nicht DRY.

Eine Problemumgehung besteht darin, meine eigene benutzerdefinierte Direktive für den Header zu erstellen, aber ich hatte gehofft, dass es eine einfachere Lösung gibt.

Danke schön!

Quelle

andreicristianpetcu

Hilfreichster Kommentar

Ja, du kannst.

Erstellen Sie eine einfache benutzerdefinierte Vorlage wie folgt:

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

Dann definieren Sie Ihre spezielle Spalte wie folgt:

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

... an Stelle von:

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

Jeremy-Walton am 3. März 2015

👍3

Alle 6 Kommentare

Ja, du kannst.

Erstellen Sie eine einfache benutzerdefinierte Vorlage wie folgt:

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

Dann definieren Sie Ihre spezielle Spalte wie folgt:

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

... an Stelle von:

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

Jeremy-Walton am 3. März 2015

👍3

Danke @Jeremy-Walton! Ich habe noch keine vollständige Implementierung vorgenommen, nur ein kleines Beispiel, und es scheint zu funktionieren: PI wird sich genauer ansehen, wie ng-table es verwendet, damit ich mein eigenes Beispiel für meinen speziellen Fall erstellen kann. https://github.com/esvit/ng-table/search?utf8=%E2%9C%93&q=type%3D%22text%2Fng-template%22

andreicristianpetcu am 4. März 2015

Wie kann ich eine Variable innen übergeben? Ich habe so etwas:

<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 am 4. März 2015

Alles, was Sie in den Header einfügen, wird im selben Bereich wie der Rest Ihrer Tabelle außerhalb der Body-Schleife ausgeführt. Siehe https://github.com/esvit/ng-table/blob/master/src/ng-table/header.html#L16 und https://docs.angularjs.org/api/ng/directive/ngInclude.

Anstelle von this.whatever sollten Sie whatever verwenden.

Jeremy-Walton am 4. März 2015

Danke schön!
Für die Nachwelt :P Das hat bei mir funktioniert:

<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 am 4. März 2015

Ja, du kannst.
Erstellen Sie eine einfache benutzerdefinierte Vorlage wie folgt:
<script id="expandAllHeader" type="text/ng-template">
  <span class="expandable" ng-click="toggleExpandAll()">+ / -</span>
</script>
Dann definieren Sie Ihre spezielle Spalte wie folgt:
<td header="'expandAllHeader'">...</td>
... an Stelle von:
<td data-title="'whatever'">...</td>

Wunderbar. Trotzdem brauchbar!!!

vcmiranda am 27. Feb. 2019

War diese Seite hilfreich?

0 / 5 - 0 Bewertungen

Ng-table: Kann ich nur einen Tabellenkopf überschreiben und nicht alle?

Hilfreichster Kommentar

Alle 6 Kommentare

Verwandte Themen