Ich muss eine durch Kommas getrennte Liste von Elementen erstellen:
<li ng-repeat="friend in friends">
<b ng-repeat="email in friend.email">{{email}}{{$last ? '' : ', '}}</b>...
</li>
Gemäß der AngularJS-Dokumentation sind in Ausdrücken keine Kontrollflussanweisungen zulässig. Deshalb {{$last ? '' : ', '}}
funktioniert mein nicht.
Gibt es eine alternative Möglichkeit, durch Kommas getrennte Listen zu erstellen?
EDIT 1
gibt es etwas einfacher als:
<span ng-show="!$last">, </span>
angularjs
angularjs-ng-repeat
Franck Freiburger
quelle
quelle
Antworten:
Sie könnten es so machen:
<b ng-repeat="email in friend.email">{{email}}{{$last ? '' : ', '}}</b>
..Aber ich mag Philipps Antwort :-)
quelle
($last && '' || ', ')
immer nachgeben', '
?{{{true: '', false: ', '}[$last]}}
. Diese Technik ist flexibler als die Verwendung,.join
da die Elemente in der Liste jeweils Mitglieder eines Arrays sein können, z. B.:<b ng-repeat="friend in friends">{{friend.email}}{{{true: '', false: ', '}[$last]}}</b>
Verwenden Sie einfach das integrierte Javascript
join(separator)
Funktion für Arrays:quelle
join()
HTMLEbenfalls:
Und in Vorlage:
quelle
{{ itemsArray.join(', ') }}
?quelle
Sie können auch CSS verwenden, um das Problem zu beheben
Aber Andy Joslins Antwort ist am besten
Bearbeiten: Ich habe meine Meinung geändert, dass ich dies kürzlich tun musste, und am Ende habe ich einen Join-Filter verwendet.
quelle
Ich denke, es ist besser zu verwenden
ng-if
.ng-show
erstellt ein Element in derdom
und setzt esdisplay:none
. Je mehrdom
Elemente Sie haben, desto ressourcenhungriger wird Ihre App. Auf Geräten mit geringeren Ressourcen gilt: Je weniger Elemente, destodom
besser.TBH
<span ng-if="!$last">, </span>
scheint eine großartige Möglichkeit zu sein. Es ist einfach.quelle
Da diese Frage ziemlich alt ist und AngularJS seitdem Zeit hatte, sich weiterzuentwickeln, kann dies jetzt leicht erreicht werden mit:
<li ng-repeat="record in records" ng-bind="record + ($last ? '' : ', ')"></li>
.Beachten Sie, dass ich
ngBind
anstelle der Interpolation verwende,{{ }}
da diese viel leistungsfähiger ist:ngBind
Wird nur ausgeführt, wenn sich der übergebene Wert tatsächlich ändert. Die Klammern{{ }}
hingegen werden bei jedem $ Digest schmutzig überprüft und aktualisiert, auch wenn dies nicht erforderlich ist. Quelle: hier , hier und hier .Abschließend ist festzuhalten, dass alle hier aufgeführten Lösungen funktionieren und bis heute gültig sind. Ich bin wirklich zu denen gefunden, die CSS betreffen, da dies eher ein Präsentationsproblem ist.
quelle
Ich mag den Ansatz von simbu, aber es ist mir nicht angenehm, das erste oder letzte Kind zu verwenden. Stattdessen ändere ich nur den Inhalt einer sich wiederholenden Liste-Komma-Klasse.
quelle
Wenn Sie ng-show verwenden, um die Werte zu begrenzen,
{{$last ? '' : ', '}}
funktioniert dies nicht, da weiterhin alle Werte berücksichtigt werden. BeispielDas Hinzufügen eines Kommas nach dem "letzten" Wert führt dazu , dass bei ng-show immer noch alle 4 Werte berücksichtigt werden
Eine Lösung besteht darin, einen Filter direkt in ng-repeat hinzuzufügen
Ergebnisse
quelle