ng-class 在条件下使用来自变量的 classes

Question

我正在使用指令并希望以某种方式使用 ng-class，以便在特定条件下可以输出多个类（存储在变量中）。

<div ng-if="showIcons" ng-class="{state.icon: showIcons}"></div>

$scope.state = { 
    icon: 'icon-cross-outline color-brand-danger'
};

不幸的是，这不起作用。

Answer 1

在 ng-class 中使用三元运算符，您可以尝试以下操作吗？

<div ng-if="showIcons" ng-class="showIcons ? state.icon : null"></div>

Demo on Plunker

Answer 2

您可以通过将函数绑定到 ng-class 来做更复杂的事情，请参阅我的 plnker

JS:

var app = angular.module('hey', []);

app.controller('TheController', [function () {
  this.title = "hey"
  this.shouldApply = true;

  this.canApplyClass = function () {
    if (this.shouldApply == true) {
      return 'happy sad other';
    }

    return '';
  }
}]);

HTML:

<body ng-app="hey">
  <div ng-controller="TheController as c">
    <h1 ng-class="c.canApplyClass()">{{c.title}}</h1>  
  </div>
</body>

我更喜欢这种方法，因为您可以在功能上变得复杂 - 甚至可以访问其他服务。

ng-class 在条件下使用来自变量的 classes

ng-class using classes from variable under condition

angularjs

ng-class

Demo on Plunker