Добавление условного класса

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 для этого, а также:

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 2

это довольно легко, используя ng-class:

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

Answer 3

Вы можете использовать очень удобная 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()); 
} 

ИМХО такое решение было бы гораздо более удобным для чтения, ремонтопригодны и вы могли бы написать модульный тест для этой части без любые усилия.