web-dev-qa-db-fra.com

ngClass ne fonctionne pas?

Je suis nouveau dans AngularJS et je comprends que la directive ngClass peut être utilisée pour insérer des classes dynamiquement dans des éléments tels que:

<input ng-class="{some-class: condition, another-class: anotherCondition}">

Et angular évaluera automatiquement quelles conditions sont vraies et insérera ces classes particulières dans l'élément.

Maintenant j'essaie de faire quelque chose comme:

<div class="form-group" ng-class="{has-success: form.email.$valid}">

Depuis que j'ai bootstrap, il colorera automatiquement l'étiquette et l'entrée verte si l'email est valide. Mais cela ne fonctionne pas et je reçois cette erreur particulière dans la console:

Error: [$parse:syntax] http://errors.angularjs.org/1.2.27/$parse/syntax?p0=-&p1=is%20unexpected%2C%20expecting%20%5B%3A%5D&p2=5&p3=%7Bhas-success%3A%20form.email.%24valid%7D&p4=-success%3A%20form.email.%24valid%7D
z/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js:6:450

etc....

Qu'est-ce que je fais mal? Est-ce un problème de syntaxe?

javascriptangularjstwitter-bootstrap
20
Rohan

Il y a un tiret dans le nom de votre classe, utilisez donc des guillemets simples!

ng-class="{'has-success': form.email.$valid}"
35
tymeJV

Il s’agit clairement d’une erreur de l’analyseur. La syntaxe est incorrecte car la propriété - figure dans le nom de propriété @ {has-success: form.email.$valid}. Vous auriez besoin de les envelopper entre guillemets.

Essayer:-

<div class="form-group" ng-class="{'has-success': form.email.$valid}">
12
PSL

Cela a fonctionné pour moi

[ngClass] = "{ 'color-red': isRed}"
0
Zohab Ali