AngularJS：変動するプログレスバーを作成するには？

Question

0から始まり、一定時間内に最大値までインクリメントするプログレスバーを作りたいと思っています。最大値に達すると、それが戻ってプロセスを繰り返します。ここに私の試みです。

HTML：

<progressbar class="progress-striped active" 
      max="max" 
      value="value" 
      type="success"> 
</progressbar> 

JS：ここ

app.controller('progressBar', function($scope,$timeout){ 
    $scope.max = 100; 
    $scope.min = 0; 
    $scope.value = 0; 

    var increment = 5; 
    var target = $scope.max; 

    $scope.increment = function() { 
     $scope.value += increment; 
    }; 

    $scope.decrement = function() { 
     $scope.value -= increment; 
    }; 

    $timeout(function() { 
     while ($scope.value <= target) { 
      $scope.increment(); 
      if($scope.value === target) { 
       target = $scope.min; 
      }; 
     }; 

     while ($scope.value >= target) { 
      $scope.decrement(); 
      if($scope.value === target) { 
       target = $scope.max; 
      }; 
     }; 
    }, 1000); 
}); 

Answer 1

angular.module("test", []).controller('testController', function($scope, $interval, $timeout) { 
 

 
    var min = 0, 
 
    max = 100; 
 
    var value = min; 
 
    $scope.myStyle = { 
 
    "width": "0%" 
 
    }; 
 
    var increment = 5; 
 

 
    function fluctuator() { 
 
    value += increment; 
 
    $scope.myStyle.width = value + "%"; 
 
    if (value > max || value < min) { 
 
     increment *= -1; 
 
     value += increment; 
 
    } 
 

 
    } 
 

 
    var interval = $interval(fluctuator, 200); 
 
    $timeout(function() { 
 
    $interval.cancel(interval); 
 
    alert("canceled to prevent infinite running of the interval.") 
 
    }, 10000) 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
< <div ng-app="test" ng-controller="testController"> 
 
    test page 
 
    <br/> 
 
    <div class="progress"> 
 
    <div class="progress-bar progress-bar-striped active" ng-style="myStyle"> 
 
    </div> 
 
    </div> 
 
    </div>

はあなたの変動プログレスバーを作成するために使用できる例です。私は10秒後にアニメーションを停止します。