Question

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

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

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

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

Answer 1

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

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

作品。

Answer 2

您需要了解的有关ng-class指令的内容是，您传入的值实际上是粗略，就好像它实际上是JavaScript一样。（我相信它实际上使用$scope.$eval。）这意味着您可以调用$scope上可用的函数来生成类哈希对象。我非常喜欢你提出的解决方案，获取你需要的类并将它们分开，但是如果你有一个动态的类列表要用于元素呢？由于语法粗略 JavaScript，因此无法通过执行{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)" />

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

2 个答案: