ng-Klasse mit wertete Ausdruck nicht mit Klassennamen als Variable

Question

Diese bestanden Arbeit ist mein html

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

Die getClasses() -Methode hier eingeben Code in Controller definiert als

$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}; 
} 

hier als meine Die Klasse 'proSpacerOneA' sollte auf die Klasse angewendet werden, aber auf ihre Klasse mit dem Namen 'alternateClass'.

Wenn jedoch der hart codierte Klassenname zurückgegeben wird, funktioniert es gut.

Was ist falsch, wenn ich Klassenname als Variable übergeben?

Answer 1

Sie benötigen Klammer-Notation zu verwenden:

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

return obj; 

Oder ES6 Objektinitialisierer (http://www.ecma-international.org/ecma-262/6.0/#sec-object-initializer):

return { [className] : false, [alternateClass] : true } 

Answer 2

Um eine Variable als Objektschlüssel zu verwenden, müssen Sie die [] Synthax verwenden.

Wechsel:

return { className: false, alternateClass: true}; 

Um

var returnObj = {}; 
returnObj[className] = false; 
returnObj[alternateClass] = true; 
return returnObj; 

Answer 3

wenn Winkel versucht

ng-class="getClasses()" 

Ausdruck, seine Füllung Klasse atribbute mit retured Objektschlüssel zu machen, wenn der Wert nicht hissen falsch ist .

Also, wenn Sie zurückkommen

{ className: false, alternateClass: true}; 

aus Ihrer Funktion Winkel wird Klasse HTML-Tag wie dieser

class="alternateClass" 

machen Sie eine andere logische Namen zu übergeben Klasse verwenden sollte Ausdruck ng-Klasse. Eine wertvolle Tutorail angebracht here