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