Ich habe derzeit eine Tabelle mit ng-Wiederholung in Angular. Der Zellenwert wird durch eine Variable im Bereich festgelegt.Wie fügt man Links in allen Zellen einer Tabelle in Angular hinzu?
<tbody>
<tr ng-repeat="item in items" myDirective>
<td>{{item.title}}</td>
<td>{{item.field}}</td>
</tr>
</tbody>
Was würde ich tun möchte, ist dies am Ende haben:
<tbody>
<tr ng-repeat="item in items" myDirective>
<td><a href="{{item.link}}">{{item.title}}</a></td>
<td><a href="{{item.link}}">{{item.field}}</a></td>
</tr>
</tbody>
So habe ich eine Richtlinie, um das zu tun, aber ich gehe nicht überall mit ihm. Ich habe versucht, jedes Kind des tr-Elements zu erhalten, umschließe dann das HTML der (td) -Kinder mit einem Tag, aber es scheint, dass die Bindung das Tag entfernt und durch den Vanilla-Elementtitel und -Feld ersetzt.
Hier ist mein Code so weit, der das a-Tag mit einer Statuswebsite auf dem ersten td-Tag (Titel) setzt, aber es kann nicht funktionieren.
angular.module('myApp')
.directive('myDirective', function() {
return {
restrict: 'A',
link: function postLink(scope, element, attrs) {
var cellules = element.children(); // get td elements
angular.element(cellules[0]).html($compile('<a href="http://website">' + angular.element(cellules[0]).html() + '</a>')(scope)); // surround title with a link
}
};
});
Vielen Dank!
Dies ist wahrscheinlich die Frage nicht vollständig beantworten, aber Sie sollten Ihre Richtlinie mit umsetzen "-" Notation nicht ... 'Camelcase < tr ng-repeat = "Element in Items" my-directive> ' – sourdoughdetzel
Woher sollen wir wissen, was' cellules [0] 'ist? Stellen Sie [mcve] bereit. Auch nur zu sagen, dass es nicht funktioniert, ist nicht viel von einem Problem Beschreibung – charlietfl
@sourdoughdetzel ja du hast Recht und es ist eigentlich so in meinem Code, aber ich machte einen Fehler bei der Änderung der Namen für das Beispiel :) – clems4ever