0

まあ、私は本当に初心者なので、それが正しい方法なのか、それとももっと簡単な方法があるのか​​ を尋ねています。

私が望むのは、値に応じて要素にクラスを追加することです...だから私は次のことをします:

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>

4

3 に答える 3