ng-class with Evaluated Expression not working with class name passed as variable

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' class 应应用于但它应用 class 名称 'alternateClass'.

但是，如果 return 硬编码的 class 名称工作正常。

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

如果我将 class 名称作为变量传递有什么问题？

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

要将变量用作对象键，您必须使用[] 语法。

变化：

return { className: false, alternateClass: true};

到

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

Answer 3

当 angular 尝试渲染时

  ng-class="getClasses()"

表达，如果值不是 hoist false，它会用返回的对象键填充 class 属性。

所以如果你 return

{ className: false, alternateClass: true};

您的函数 angular 将呈现 class html 这样的标签

class="alternateClass"

您应该使用不同的逻辑将 class 名称传递给 ng-class 表达式。附上有价值的教程 here

ng-class with Evaluated Expression not working with class name passed as variable

ng-class with Evaluated Expression not working with class name passed as variable

angularjs

ng-class