Générer html grâce à une fonction dans le contrôleur

Version imprimable

14/07/2015, 18h38
pop_up

Générer html grâce à une fonction dans le contrôleur

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:

{{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:

<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

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 :

Dans la vue :

Code:

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>

Et dans tes CSS :

Code:

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

15/07/2015, 07h38
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

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:

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

16/07/2015, 16h01
Marco46

Citation:

Envoyé par pop_up

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

Oui, les auteurs du framework :)
16/07/2015, 16h41
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:

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:

1 2 attrs.$observe('val1', function toto(value){.....});
En espérant que ça puisse aider quelqu'un qui cherche à faire la même chose ;)
17/07/2015, 17h31
Marco46

Tu prends exactement le chemin qu'il ne faut pas prendre.

On ne recode pas à la mimine des choses qui existent déjà dans le framework c'est n'imp.

Pour insérer telle ou telle classe dans le DOM en fonction d'un prédicat tu as ng-class.
Pour insérer telle ou telle balise dans le DOM en fonction d'un prédicat tu as ng-if et ng-switch.
Pour afficher telle ou telle balise en fonction d'un prédicat tu as ng-show et ng-hide.
20/07/2015, 11h33
pop_up

Du coup il vaut mieux alourdir la vue afin d'être plus performant ?

J'avais créé ma directive afin que ça soit beaucoup plus lisible, mais je peux essayer de supprimer la directive afin d'utiliser le ng-class

J'utilisait bien les ng-if pour afficher ou non mes éléments.

Merci pour ton aide
22/07/2015, 11h56
Marco46

Utilises ng-class pour conditionner l'injection des classes et implémentes tes conditions (et qui retourne un booléen) dans un service dont tu binderas l'instance dans ton controlleur.

Ce qui donnera ensuite quelque chose comme ceci :

Code:

<div ng-class="{'ma-classe-css' : $scope.instanceService.methodeOuImplementerTaLogique(param1, param2)}"></div>