NG-類不能與可變

Question

這通過類名工作計算的表達式是我的HTML

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

的getClasses（）方法進入控制器這裏定義代碼

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

這裏爲我的期望'proSpacerOneA'類應該被應用到 但是它的名字'alternateClass'應用類。

但是，如果返回硬編碼的類名工作正常。

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

如果我將類名稱作爲變量傳遞會出現什麼問題？

Answer 1

你需要用括號標記：

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

return obj; 

或者ES6對象初始化（http://www.ecma-international.org/ecma-262/6.0/#sec-object-initializer）：

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

Answer 2

要使用一個變量作爲對象鍵，你必須使用[] synthax。

變化：

return { className: false, alternateClass: true}; 

要

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

Answer 3

當角試圖呈現

ng-class="getClasses()" 

表達， 其填充類atribbute與retured對象鍵，如果值不是葫蘆假。

所以，如果你從你的函數返回

{ className: false, alternateClass: true}; 

角將呈現這樣

class="alternateClass" 

你應該使用不同的邏輯來傳遞類名到納克級的表達類 HTML標記。 附有價值的tutorail here