Question

嗯，我真的是菜鸟，所以我问这是不是正确的方法，或者有一种更简单的方法。

我想要的是根据一个值向一个元素添加一个类...所以我在下一步做了什么：

HTML：

<progress value="{{ luminaria.nivelcargabateria }}"></progress>

指令定义：

angular.module('angularJSApp')
  .directive('progress', function () {
    return {
      restrict: 'E',
      replace: true,
      templateUrl: 'views/progress.html',
      scope: {
        value: '@'
      },
      controller: function ($scope) {
        $scope.barClass = function () {
          return ($scope.value > 66)?'success':($scope.value > 33)?'warning':'danger';
      }
    }
  };
});

指令模板：

<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>

Answer 1

您可以使用非常方便的ng-class指令http://docs.angularjs.org/api/ng.directive:ngClass

例如

<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());
}

恕我直言，这个解决方案将更具可读性和可维护性，您可以毫不费力地为此作品编写单元测试。

Answer 2

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

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

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

<div class="progress">
  <div class="progress-bar" ng-class="{'progress-bar-success': value>66, 'progress-bar-danger': value>33, 'progress-bar-danger': value<=33}" role="progressbar" aria-valuenow="{{ value }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ value }}%">
  <span class="sr-only">{{ value }}%</span>
</div>

Answer 3

使用ng-class：

非常简单

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

添加条件类

3 个答案: