C'est mon html

    <div ng-class="getClasses()"> </div>

La méthode getClasses () entre le code ici défini dans le contrôleur comme

    $scope.getClasses = function () {

   //another function call to get class name

   //To make short what ever the function returns it stores to variable 
     className i.e. 

    var className = 'proSpacerOne';

   //Similarly let

    var alternateClass = 'proSpacerOneA';


    return { className: false, alternateClass: true};
}

Ici, comme mon attente, la classe «proSpacerOneA» doit être appliquée au Mais sa classe d'application avec le nom «AlternateClass».

Cependant, si retournez le nom de classe codé en dur, cela fonctionne bien.

  return { 'proSpacerOne': false, 'proSpacerOneA': true};

Quel est le problème si je passe le nom de la classe en tant que variable?

1
himanshu 4 mai 2017 à 15:19

3 réponses

Meilleure réponse

Vous devez utiliser la notation entre crochets:

var className = 'proSpacerOne';
var alternateClass = 'proSpacerOneA';
var obj = {}
obj[className] = false;
obj[alternateClass] = true;

return obj;

Ou l'initialiseur d'objet ES6 (http: //www.ecma- international.org/ecma-262/6.0/#sec-object-initializer):

return { [className] : false, [alternateClass] : true }
1
tymeJV 4 mai 2017 à 12:24

Quand angulaire essayant de rendre

  ng-class="getClasses()"

Expression, c'est l'attribut de classe de remplissage avec les clés d'objet renvoyées si la valeur n'est pas faux.

Donc si tu reviens

{ className: false, alternateClass: true};

À partir de votre fonction angular rendra la balise html de classe comme celle-ci

class="alternateClass"

Vous devez utiliser une logique différente pour passer les noms de classe à l'expression ng-class. Un précieux tutoriel joint ici

0
Tamer Aktaş 4 mai 2017 à 13:06

Pour utiliser une variable comme clé d'objet, vous devez utiliser la syntaxe [].

Changement:

return { className: false, alternateClass: true};

À

var returnObj = {};
returnObj[className] = false;
returnObj[alternateClass] = true;
return returnObj;
0
Mistalis 4 mai 2017 à 12:29