Muszę utworzyć listę elementów oddzieloną przecinkami:
<li ng-repeat="friend in friends">
<b ng-repeat="email in friend.email">{{email}}{{$last ? '' : ', '}}</b>...
</li>
Zgodnie z dokumentacją AngularJS w wyrażeniach nie są dozwolone żadne instrukcje przepływu sterowania. Dlatego mój {{$last ? '' : ', '}}
nie działa.
Czy istnieje alternatywny sposób tworzenia list oddzielonych przecinkami?
EDYCJA 1
jest coś prostszego niż:
<span ng-show="!$last">, </span>
angularjs
angularjs-ng-repeat
Franck Freiburger
źródło
źródło
Odpowiedzi:
Możesz to zrobić w ten sposób:
<b ng-repeat="email in friend.email">{{email}}{{$last ? '' : ', '}}</b>
..Ale podoba mi się odpowiedź Filipa :-)
źródło
($last && '' || ', ')
zawsze powinno ustępować', '
?{{{true: '', false: ', '}[$last]}}
. Ta technika jest bardziej elastyczna niż używanie,.join
ponieważ pozwala elementom na liście być członkami tablicy, na przykład:<b ng-repeat="friend in friends">{{friend.email}}{{{true: '', false: ', '}[$last]}}</b>
Wystarczy użyć wbudowanej
join(separator)
funkcji JavaScript dla tablic:źródło
join()
i wyłączać funkcję ucieczki HTML, ale jest w tym specjalne miejsce w piekle;)Również:
I w szablonie:
źródło
{{ itemsArray.join(', ') }}
?źródło
Możesz także użyć CSS, aby to naprawić
Ale odpowiedź Andy'ego Joslina jest najlepsza
Edycja: Zmieniłem zdanie, musiałem to zrobić niedawno i ostatecznie zdecydowałem się na filtr sprzężenia.
źródło
Myślę, że lepiej jest używać
ng-if
.ng-show
tworzy element wdom
i ustawia godisplay:none
. Im więcejdom
elementów, tym więcej zasobów staje się głodnych, a na urządzeniach z niższymi zasobami, im mniejdom
elementów, tym lepiej.TBH
<span ng-if="!$last">, </span>
wydaje się świetnym sposobem na zrobienie tego. To proste.źródło
Ponieważ to pytanie jest dość stare i od tego czasu AngularJS miał czas na ewolucję, można to teraz łatwo osiągnąć za pomocą:
<li ng-repeat="record in records" ng-bind="record + ($last ? '' : ', ')"></li>
.Zauważ, że używam
ngBind
zamiast interpolacji,{{ }}
ponieważ jest znacznie wydajniejszy:ngBind
będzie działał tylko wtedy, gdy przekazana wartość faktycznie się zmieni. Z kolei nawiasy klamrowe{{ }}
będą sprawdzane i odświeżane przy każdym $ streszczeniu, nawet jeśli nie jest to konieczne. Źródło: tutaj , tutaj i tutaj .Podsumowując, wszystkie rozwiązania tutaj działają i obowiązują do dziś. Naprawdę jestem przekonany do tych, które dotyczą CSS, ponieważ jest to bardziej problem z prezentacją.
źródło
Lubię podejście Simbu, ale nie jest mi wygodnie korzystać z pierwszego dziecka lub ostatniego dziecka. Zamiast tego modyfikuję tylko zawartość powtarzającej się klasy przecinek list.
źródło
Jeśli używasz ng-show do ograniczenia wartości,
{{$last ? '' : ', '}}
nie zadziała, ponieważ nadal będzie uwzględniał wszystkie wartości.Powoduje dodanie przecinka po wartości „ostatniej” , ponieważ w przypadku ng-show nadal uwzględnia wszystkie 4 wartości
Jednym z rozwiązań jest dodanie filtra bezpośrednio do powtórzenia ng
Wyniki
źródło