[Résolu] [AngularJS] Classe CSS, ng-click et ng-repeat

Bonjour,

Je continue mon projet (auquel je viens de poster et résoudre un problème) et je suis confronté à un problème : je crée une div en boucle grâce à ng-repeat, chaque div contient un élément différent que j'insère de la manière classique en y insérant la propriété entre {{ }}.
Comment puis-je définir une classe et l'insérer dans chaque élément ?

J'ai essayé ça dans la logique mais ça ne marche pas :

	var websites = [
		{
			title: "LightWolf Studios",
			description: "Our new website [smile]",
			date: 2014
			classe: maClasse
		},
		{
			title: "LightWolf Studios 2",
			description: "Our new website [smile]",
			date: 2014
			classe: maClasse2
		}

<div ng-controller="WebsitesController as portfolioWebsites" class="content">
	<ul class="grid cs-style-1">
		<li ng-repeat="website in portfolioWebsites.items">
			<figure>
				<img data-src="img/portfolio-lightwolf-studios-2014.png" data-effect="fadeInUp" alt="Portfolio - LightWolf Studios">
				<figcaption>
					<div class="figcaption-container-inside">
						<div class="element-title {{website.classe}}">{{website.title}}</div>
						<div class="element-description-1">{{website.description}}</div>
						<div class="element-description-2">{{website.date}}</div>
						<button type="button" class="btn btn-dead coming-soon lang" onclick="showLightDialog($('#lightDialog9'))"></button>
					</div>
				</figcaption>
			</figure>
		</li>
	</ul>
</div>

Merci =)
Modifié par LightBen (03 Jul 2014 - 15:53)

Bon, maintenant j'ai un autre soucis...

J'ai un bouton avec dedans un onclick qui appelle un élément JQuery. Tout ça à l'intérieur d'une boucle ng-repeat.
Maintenant, cet élément JQuery doit changer pour chaque élément. J'ai essayé encore une fois de mettre cet élément JQuery en propriété de l'élément dans mon JS, mais cette fois (c'est sûr) ça ne marche pas. J'ai aussi essayé plusieurs combinaisons avec ng-click mais sans succès...

Voici mon code :

<div ng-controller="WebsitesController as portfolioWebsites" class="content">
	<ul class="grid cs-style-1">
		<li ng-repeat="website in portfolioWebsites.items">
			<figure>
				<img data-src="img/{{website.img}}" data-effect="fadeInUp" alt="{{website.imgAlt}}">
				<figcaption>
					<div class="figcaption-container-inside">
						<div class="element-title">{{website.title}}</div>
						<div class="element-description-1">{{website.description}}</div>
						<div class="element-description-2">{{website.date}}</div>
						<button type="button" class="btn btn-dead coming-soon lang" onclick="showLightDialog($('#lightDialog9'))"></button>
					</div>
				</figcaption>
			</figure>
		</li>
	</ul>
</div>

Comment changer la partie "onclick="showLightDialog($('#lightDialog9'))"" pour qu'elle soit dynamique ? Que ce soit pour un élément lightDialog9 qui soit appelé, pour un autre lightDialog2, etc?

Merci =)

Edit : la forme correcte est de mettre ng-click="showLightDialog(website.dialog)" et dans le fichier JS on écrit : dialog: $('#lightDialog9') sans les guillemets autour de $('#lightDialog9').

J'espère que ça n'énervera pas le forum le fait que je crée des sujets et les résoud tout seul, je cherche tellement qu'après un certain temps je trouve mais avant ça, ya un bon moment où du coup j'ai besoin d'aide alors je poste mon problème...
Modifié par LightBen (03 Jul 2014 - 15:53)