javascript - 如何使用 ng-class 将一个类绑定到一个值

Question

我想将一个类绑定到一个值，如下所示：

ng-class="{first: isTrue, second: isTrue, third: isTrue}"

是否ng-class存在任何用法可以一次绑定它们，像这样？（下面的代码不起作用）

ng-class="{[first, second, third]: isTrue}"

Answer 1

事实证明，当 value 为 true 时，单引号中的属性名称将直接添加到类中。

ng-class="{'first second third': isTrue}"

作品。

Answer 2

关于指令你需要知道的ng-class是，你传入的值实际上被粗略地评估，就好像它实际上是 JavaScript。（它实际上使用$scope.$eval，我相信。）这意味着你可以调用一个可用的函数$scope来生成你的类哈希对象。我非常喜欢您提出的解决方案，获取您需要的类并将它们分开，但是如果您有一个想要应用于元素的类的动态列表怎么办？因为语法大致是JavaScript，所以不能通过 do 来构建对象{list.join(' '): isTrue}（因为这在 JavaScript 中无效）。但是，您可以做的是编写一个函数并将其添加到执行此操作的范围中：

angular.module('app')
  .controller('MyCtrl', function($scope) {
    $scope.myList = ['first', 'second', 'third'];

    $scope.allOrNoneClasses = function(list, condition) {
      var o = {};
      if (condition) {
        o[list.join(' ')] = true;
      }
      return o;
    };
    $scope.scopeBasedClasses = function(list) {
      var o = {};
      list.forEach(function(class){
        // this applies a class which matches the scope attribute if
        // the attribute evaluates to a truthy value.
        o[class] = $scope.$eval(class);
      });
      return o;
    };
  });

这可以在您的 HTML 中使用，如下所示：

<div ng-class="allOrNoneClasses(myList, isTrue)" />