Javascript 添加条件类

嗯，我真的是个笨蛋，所以我在问这是正确的方法还是有更简单的方法

我想要的是根据一个值向元素添加一个类。。。所以我接下来要做的是：

HTML:

指令模板：

<div class="progress">
  <div class="progress-bar progress-bar-{{ barClass() }}" role="progressbar" aria-valuenow="{{ value }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ value }}%">
  <span class="sr-only">{{ value }}%</span>
</div>

{{value}}}%

---

我不确定它是否更好，但您也可以使用

ng class

：

angular.module('angularJSApp')
  .directive('progress', function () {
    return {
      restrict: 'E',
      replace: true,
      templateUrl: 'views/progress.html',
      scope: {
        value: '@'
      }
    }
  };
});

HTML:进度条-{{barClass（）}}

{{value}}}%

使用

ng类非常简单：

<div ng-class="{'class-a': testCondition, 'class-b': anotherTestCondition}"></div>

您可以使用非常方便的
ng class
指令

比如说

<div ng-class="success: aboutToFinish(), warning: inProgress(), danger: justStarted()"></div>



在控制器内部：

$scope.aboutToFinish = function() {
  return $scope.value > 66;
}

$scope.inProgress = function() {
  return $scope.value > 33 && $scope.value < 66;
}

$scope.justStarted = function() {
  return !($scope.inProgress() && $scope.finished());
}

$scope.aboutToFinish=function（）{
返回$scope.value>66；
}
$scope.inProgress=函数（）{
返回$scope.value>33&$scope.value<66；
}
$scope.justStarted=函数（）{
return！（$scope.inProgress（）&&&$scope.finished（））；
}

我想这个解决方案会更具可读性和可维护性，您可以不费吹灰之力就为这篇文章编写一个单元测试。
我不确定您为什么需要指令，但请务必从角度看ng类指令。
<div ng-class="{'class-a': testCondition, 'class-b': anotherTestCondition}"></div>

<div ng-class="success: aboutToFinish(), warning: inProgress(), danger: justStarted()"></div>

$scope.aboutToFinish = function() {
  return $scope.value > 66;
}

$scope.inProgress = function() {
  return $scope.value > 33 && $scope.value < 66;
}

$scope.justStarted = function() {
  return !($scope.inProgress() && $scope.finished());
}