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

这是我的期望＆＃39; proSpacerOneA＆＃39;类应该适用于但它的应用类名为＆＃39; alternateClass＆＃39;。

但是如果返回硬编码的类名，它的工作正常。

  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()"

表达，如果值不是提升错误，则其填充类属于已复制的对象键。

所以如果你回来了

{ className: false, alternateClass: true};

从你的函数angular将渲染类像这样的HTML标签

class="alternateClass"

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

带有Evaluated Expression的ng-class不能使用作为变量传递的类名

3 个答案: