Changement conditionnel img src en fonction des données du modèle

Je veux représenter des données de modèle sous forme d’images différentes en utilisant Angular, mais j’ai du mal à trouver le “bon” moyen de le faire. Les documents Angular API sur les expressions indiquent que les expressions conditionnelles ne sont pas autorisées …

En simplifiant beaucoup, les données du modèle sont récupérées via AJAX et vous montre l’état de chaque interface sur un routeur. Quelque chose comme:

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

Donc, dans Angular, nous pouvons afficher l’état de chaque interface avec quelque chose comme:

 
 
{{interface}}  

BUT – Au lieu des valeurs du modèle, je voudrais montrer une image appropriée. Quelque chose qui suit cette idée générale.

• Portée angular: $ appliquer vs $ timeout en tant que $ safe
• Imbriqué ng-repeat
• Quelle est la différence entre «ignorer» un modal et «fermer» un modal dans UI-Bootstrap angular?
• Fichier de configuration dans AngularJS
• AngularJS orderBy ne fonctionne pas avec track by dans ngOptions?

 
 
 {{if interface=="UP"}}  {{else}}  {{/if}}  

(Je pense que Ember supporte ce type de construction)

Bien sûr, je pourrais modifier le contrôleur pour renvoyer des URL d’images en fonction des données du modèle, mais cela semble violer la séparation du modèle et de la vue, non?

Cette publication a suggéré d’utiliser une directive pour changer la source de bg-img. Mais alors nous sums de retour pour mettre des URL dans le JS, pas le modèle …

Toutes les suggestions sont appréciées. Merci.

veuillez excuser les fautes de frappe

• Comment lier 2 modèles à un champ de saisie dans Angular?
• Utiliser ng-click vs bind dans la fonction de lien de la directive angular
• Directive AngularJS liant une fonction avec plusieurs arguments
• Est-il possible de concaténer des valeurs dans les options angulars ng
• $ http n’envoie pas de cookie dans les requêtes

 condition && true || false