Discussion :

[pop_up]

Bonjour,

Je ne sais pas si ce que je veux est possible ou quel est la meilleure méthode pour le faire.

Dans ma page, je peux afficher mes données val1 et val2 par exemple avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

{{val1}} et {{val2}}

Ce que je voudrai faire, c'est une fonction qui me retourne le html à afficher en fonction des valeurs de ces données.
Par exemple, je veux soustraire val2 à val1. Si le résultat est négatif, je veux une classe "rouge" rattachée sur un span sinon "vert"

Du coup en sortie, je voudrai voir le résultat de la soustraction avec un truc de ce style :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<span class="rouge">XXX</span>

(où XXX serait le résultat de la soustraction.

Quel est la méthode la plus simple sachant que je veux mutualiser ce comportement car j'aurai plusieurs lignes de ce style et d'autres différentes où mes calculs se feront de manière différente ?

merci

[Invité]

Salut,

J'ai déjà fait ça dans un tableau, dans un ng-repeat en ajoutant une instruction ng-class qui alterne les classes CSS en fonction d'une valeur. L'exemple parait un peu compliqué, mais il pourra peut être te servir.
Je fais un calcul dans le ng-class qui affiche une ligne rouge ou orange en fonction du résultat du calcul sur le modèle.

Exemple :
SI article.quantite-article.commandes < 4 ALORS activer le CSS highlightred sur la ligne du tableau correspondante.


Le Code :

1. Dans la vue :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<tr ng-repeat="article in stock |  filter:categorieModel |  orderBy:predicate | filter:q as results" ng-class="{ highlight: article.quantite-article.commandes < 4 ,highlightred: article.quantite-article.commandes < 1 }" >
 
	<td>{{article.id}}</td>
	<td> <img src="{{article.photo}}" class="img"> </td>
	<td>{{article.nom}}</td>
	<td>{{article.categorie}}</td>
	<td>{{article.marque}}</td>
	<td>{{article.quantite-article.commandes}}</td>
	<td>{{article.commandes}}</td>
	<td>{{article.achat |  currency:"&euro;"}}</td>
	<td><b>{{article.prix |  currency:"&euro;"}}</b><br><input type="number" class="petitinput" ng-model='article.prix' step="0.01"></td>
	<td><h4>{{article.prix-article.achat |  currency:"&euro;"}}  {{(article.prix-article.achat)/article.achat*100 |  currency:"%"}}</h4></td>
	<td><button ng-click="ajouter($index,article.id)">Ajouter à la commande</button></td>
	<td>{{article.fournisseur}}</td>
	<td>{{article.heureajout}}</td>
	<td>{{article.dateAjout}}</td>
	<td><button ng-click="supprimerStockElement(article.id)" >Supprimer </button></td>
</tr>

1. Et dans tes CSS :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.highlight {
    background-color: orange;
}
 
.highlightred {
    background-color: red;
 
}

[pop_up]

Le truc c'est que dans ton scope, tu a déjà le résultat à exploiter.

Pour moi, le calcul du résultat est à faire (et parfois ne sera pas qu'une simple soustraction).

Pour la classe, je vois le principe et c'est vrai qu'a partir du moment ou j'aurai le résultat à exploiter, ça conviendrai parfaitement.

Merci pour ta réponse en tout cas

[pop_up]

Avec une directive ? quelqu'un a déjà fait ça ?

J'ai essayé ça, mais quand la valeur val1 change, ça ne me modifie pas ma classe :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
app.directive('monTag', function() {
	return {
		restrict: 'E',
		scope: {
			val1: '=val1',
			val2: '=val2'
		},
		link: function(scope, element, attrs) {
			if (scope.val1>0){
				scope.getClass = 'more';
			} else {
				scope.getClass = 'less';
			}
		},
		template: '=> {{val1-val2}} <span class="{{getClass}}"> test</span> '
	};
});

merci pour votre aide

[Marco46]

Avec une directive ? quelqu'un a déjà fait ça ?

Oui, les auteurs du framework

[pop_up]

La bonne réponse était que, pour mettre à jour le html au changement de "val1", il faut ajouter un observateur.

Au final, dans la vue, je passe ma valeur en attribut :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<monTag val1="{{h1.stats.life}}"></monTag>

Puis dans la directive, on n'utilise pas "=" pour récupérer la valeur dans le scope mais "@"

Et enfin on observe l'attribut avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
attrs.$observe('val1', function toto(value){.....});

En espérant que ça puisse aider quelqu'un qui cherche à faire la même chose