Chcę wykonać warunek w szablonie AngularJS. Pobieram listę filmów z interfejsu API YouTube. Niektóre filmy są w proporcjach 16: 9, a niektóre w proporcjach 4: 3.
Chcę wprowadzić taki stan:
if video.yt$aspectRatio equals widescreen then
element's attr height="270px"
else
element's attr height="360px"
Używam iteracji filmów ng-repeat
. Nie mam pojęcia, co powinienem zrobić dla tego warunku:
- Dodać funkcję w zakresie?
- Czy to w szablonie?
if-statement
angularjs
Shenzhen
źródło
źródło
Odpowiedzi:
Angularjs (wersje poniżej 1.1.5) nie zapewnia tej
if/else
funkcjonalności. Poniżej znajduje się kilka opcji do rozważenia, co chcesz osiągnąć:( Przejdź do aktualizacji poniżej (# 5), jeśli używasz wersji 1.1.5 lub nowszej )
1. Operator trójskładnikowy:
Jak sugeruje @Kirk w komentarzach, najczystszym sposobem na zrobienie tego byłoby użycie operatora trójskładnikowego w następujący sposób:
2.
ng-switch
dyrektywa:można użyć czegoś takiego jak poniżej.
3.
ng-hide
/ng-show
dyrektywyAlternatywnie możesz również użyć,
ng-show/ng-hide
ale użycie tego spowoduje wyrenderowanie zarówno dużego wideo, jak i małego elementu wideo, a następnie ukryje ten, który spełniang-hide
warunek i pokazuje ten, który spełniang-show
warunek. Na każdej stronie będziesz renderować dwa różne elementy.4. Inną opcją do rozważenia jest
ng-class
dyrektywa.Można to wykorzystać w następujący sposób.
Powyższe w zasadzie doda
large-video
klasę css do elementu div, jeślivideo.large
jest to prawdą.AKTUALIZACJA: Angular 1.1.5 wprowadził
ngIf directive
5.
ng-if
dyrektywa:W powyższych wersjach
1.1.5
możesz skorzystać zng-if
dyrektywy. Spowoduje to usunięcie elementu, jeśli podane wyrażenie zwrócifalse
i ponownie wstawielement
element DOM, jeśli wyrażenie zostanie zwróconetrue
. Może być używany w następujący sposób.źródło
ng-switch on="video"
zamiastng-switch-on="video"
<span>{{isAdded ? 'Added' : 'Add to cart'}}</span>
ng-if
NIE doda zamkniętych elementów do DOM, dopóki jego stan nie zostanie ocenionytrue
, w przeciwieństwie dong-hide
ing-show
.ng-switch="video"
? Pewien problem? czy nie był wcześniej dostępny? Dla mnie to działa całkiem dobrzeW najnowszej wersji Angulara (od 1.1.5) wprowadzono dyrektywę warunkową o nazwie
ngIf
. To różni się odngShow
ingHide
tym, że elementy nie są ukryte, ale nie ujęte w DOM w ogóle. Są bardzo przydatne w przypadku komponentów, których tworzenie jest kosztowne, ale nie są używane:źródło
ng-if
wprowadza izolowany zakres , dzięki czemu$parent
staje się$parent.$parent
w cieleng-if
.Trójskładnik jest najwyraźniejszym sposobem na zrobienie tego.
źródło
Sam Angular nie zapewnia funkcjonalności if / else, ale można ją uzyskać, włączając ten moduł:
https://github.com/zachsnow/ng-elif
Innymi słowy, jest to po prostu „prosty zbiór dyrektyw dotyczących przepływu kontroli: ng-if, ng-else-if i ng-else”. Jest łatwy i intuicyjny w użyciu.
Przykład:
źródło
ng-if="someCondition && someOtherCondition"
. Być może źle zrozumiałem? (Napisałem ten moduł - to powinno działać tak jakif
ielse
w JS).Możesz użyć swojej
video.yt$aspectRatio
właściwości bezpośrednio, przepuszczając ją przez filtr i wiążąc wynik z atrybutem wysokości w szablonie.Twój filtr wyglądałby mniej więcej tak:
A szablon będzie:
źródło
video.yt$aspectRatio
jest pusty lub niezdefiniowany? Czy można zastosować wartość domyślną?W takim przypadku chcesz „obliczyć” wartość piksela w zależności od właściwości obiektu.
Zdefiniowałbym funkcję w kontrolerze, która oblicza wartości pikseli.
W kontrolerze:
Następnie w swoim szablonie po prostu piszesz:
źródło
Zgadzam się, że trójskładnik jest wyjątkowo czysty. Wydaje się, że jest to bardzo sytuacyjne, ponieważ muszę wyświetlać div, p lub table, więc z tabelą nie wolę trójki z oczywistych powodów. Wywołanie funkcji jest zazwyczaj idealne lub w moim przypadku zrobiłem to:
źródło
możesz użyć dyrektywy ng-if jak wyżej.
źródło
Możliwość dla Angulara: Musiałem zawrzeć instrukcję if - w części HTML, musiałem sprawdzić, czy wszystkie zmienne adresu URL, który tworzę, są zdefiniowane. Zrobiłem to w następujący sposób i wydaje się, że jest to elastyczne podejście. Mam nadzieję, że komuś się przyda.
Część HTML w szablonie:
I część maszynopisu:
Dziękuję i pozdrawiam,
Jan
źródło
ng Jeśli inaczej
źródło