带有变量的 ngClass 样式答案

【问题标题】：ngClass style with variable in key带有变量的 ngClass 样式
【发布时间】：2015-05-07 14:37:01
【问题描述】：

我希望有人可以帮助我。我正在使用 angular v1.3.14，并尝试在 ng-class 映射的键中添加范围变量。

例子

        <b class="fixedClass" ng-class="{'classOne'       : x === 'foo',
                                         'classTwo-%(y)%' : x === 'bar'}">
            %(z)%
        </b>

有没有办法做这样的事情或者有什么办法？

【问题讨论】：

你想做什么..你想分配一个动态类名
我正在创建一个指令，其中我提供 %(y)% [在这种情况下]
那么我认为更好的选择是使用变量作为类名，例如ng-class="dynaClass"，然后在x 上使用watch 来更新dynaclass 的值
不知何故它现在与上面的代码用法一起工作。我自己也很惊讶。
你是说你的代码现在可以工作了吗？

标签： javascript json angularjs ng-class

【解决方案1】：

你可以这样做

angular.module('App',[])
.controller('AppController',['$scope',function($scope){
    $scope.y = 10;
    $scope.val = 'bar';

    var fixedClass = "fixedClass ";

    $scope.getCSSClass = function(){
      if($scope.val === 'foo'){
        return fixedClass + 'classOne';
      } else {
        return fixedClass + 'classTwo-(' +$scope.y+ ')';
      }
    };
}])

在 HTML 中

<body ng-controller="AppController">
  <b ng-class="getCSSClass()">hello</b>
</body>

这是working 代码

【讨论】：

这行得通，但isActive() 恕我直言是个坏名字。更好的名字应该是getCssClass()
是的，使用控制器在这里可以工作 - 感谢您在此处通过示例注意到它。我仍然希望在不使用额外控制器的情况下解决这个问题:)
您的示例也应该可以工作 :)，但是如果可以的话，请尽量让您的模板远离逻辑。控制器是这类东西的好地方。再添加一个控制器不会减慢您的代码速度。

【解决方案2】：

查看您的要求，您似乎将静态类名与动态类名混合在一起。首选方法是

ng-class="['fixedClass',' fixedClass2',getDynamicStyle()]"

getDynamicStyle 暴露在范围内以返回动态类名的值。您可以添加任意数量的动态样式。

【讨论】：