Warunkowa zmiana img src na podstawie danych modelu

Chcę reprezentować dane modelu jako różne obrazy przy użyciu Angular, ale mając problemy z odnalezieniem "właściwego" sposobu na zrobienie tego. Angular API docs on expressions mówi, że wyrażenia warunkowe są niedozwolone ...Warunkowa zmiana img src na podstawie danych modelu

Upraszczając wiele, dane modelu są pobierane przez AJAX i pokazują stan każdego interfejsu na routerze. Coś jak:

$scope.interfaces = ["UP", "DOWN", "UP", "UP", "UP", "UP", "DOWN"]

Więc w kątowa, możemy wyświetlić stan każdego interfejsu z czymś takim:

<ul> 
    <li ng-repeat=interface in interfaces>{{interface}} 
</ul>

ALE - Zamiast wartości z modelu, chciałbym pokazać odpowiedni obraz. Coś podążającego za tą ogólną ideą.

<ul> 
    <li ng-repeat=interface in interfaces> 
    {{if interface=="UP"}} 
     <img src='green-checkmark.png'> 
    {{else}} 
     <img src='big-black-X.png'> 
    {{/if}} 
</ul>

(myślę Ember obsługuje ten typ konstrukcji)

oczywiście mogę zmodyfikować sterownik aby powrócić URL obrazu w oparciu o rzeczywiste dane modelu, ale to wydaje się naruszać oddzielenie modelu i widok, nie?

This SO Posting sugeruje użycie dyrektywy do zmiany źródła bg-img. Ale wracamy do wprowadzania adresów URL w JS, a nie szablonu ...

Wszystkie sugestie doceniane. Dzięki.

proszę wybaczyć żadnych literówek

Źródło

2012-12-22 Danny

160

Zamiast src musisz ng-src.

angularjs widoki wspierać operatorów binarnych

condition && true || false

Więc tag img wyglądałby następująco

<img ng-src="{{interface == 'UP' && 'green-checkmark.png' || 'big-black-X.png'}}"/>

Uwaga: cudzysłowów (czyli 'zielono-checkmark.png') są ważne tutaj . To nie zadziała bez cytatów.

plunker here(narzędzia open dev aby zobaczyć wyprodukowany HTML)

Źródło

2012-12-22 03:36:28 jaime

Dzięki! Sprawdziłem dokładnie w dokumentach, ale są one dość ubogie w wyrażenia. – Danny

To jest ratownik; Dokumenty tak naprawdę nie wspominają, że można używać operatorów binarnych w ng-src –

W najnowszej wersji niestabilnej Angular (jestem na 1.1.4) możesz użyć ng-attr- do ustawienia dowolnego atrybutu w ten sam sposób. –

Inną alternatywą (innych niż sugerowane przez operatorów binarnych @ JM) jest użycie ng-switch:

<span ng-switch on="interface"> 
    <img ng-switch-when="UP" src='green-checkmark.png'> 
    <img ng-switch-default src='big-black-X.png'> 
</span>

ng-switch będzie prawdopodobnie będzie lepiej/łatwiej, jeśli masz więcej niż dwa obrazy.

Źródło

2012-12-22 05:43:49

<ul> 
    <li ng-repeat=interface in interfaces> 
     <img src='green-checkmark.png' ng-show="interface=='UP'" /> 
     <img src='big-black-X.png' ng-show="interface=='DOWN'" /> 
    </li> 
</ul>

Źródło

2015-01-06 17:28:29 mia

Próbowałem to z tym pokazuje dwa obrazy na niewielki ułamek czasu. – Sebastialonso

@Sebastialonso może wypróbujesz ng-if zamiast tego? –

To nie działa tak, jak powinno działać –

Innym sposobem ..

<img ng-src="{{!video.playing ? 'img/icons/play-rounded-button-outline.svg' : 'img/icons/pause-thin-rounded-button.svg'}}" />

Źródło

2016-06-21 12:39:43 pkdkk

Warunkowa zmiana img src na podstawie danych modelu

Odpowiedz

Powiązane problemy