AngularJS幸运号码生成器：如何添加进度条动画？

Question

我是 angularjs 的新手。我编写了这个幸运数字生成器应用程序，它在单击 "Generate" 按钮 5 秒后生成幸运数字。我想添加一个在 5 秒内完成然后显示结果的进度条。当前进度条仅在页面加载后立即显示。如何避免这种情况？

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
  $scope.show = true;
  
  $scope.$timeout = $timeout;
  
  $scope.generate = function() {
    var k = Math.floor(Math.random() * 10 + 1);
    if (k == $scope.userinput) {
      $scope.result = "Hooray! You won 000!";
    } else {
      $scope.result = "Lucky number generated: " + k + "Try again!";
    }

  };
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body>
  <style>
    #progressbar {
      height: 5px;
      width: 100%;
      background-color: red;
      animation-name: prgb;
      animation-duration: 5s;
    }
    
    @keyframes prgb {
      0% {
        width: 0%;
      }
      25% {
        width: 25%;
      }
      50% {
        width: 50%;
      }
      75% {
        width: 75%;
      }
      100% {
        width: 100%;
      }
    }
  </style>
  <div ng-app="myApp" ng-controller="myCtrl">
    Enter number between 0-10: <input type="text" ng-model="userinput">
    <button ng-click="$timeout(generate, 5000);">Generate</button><br><br>
    <div id="progressbar" ng-show="show" ng-initialize="show=false;"></div>
    <div>{{result}}</div>
  </div>
</body>

</html>

Answer 1

进度条立即出现的原因是因为您在加载控制器后立即将 $scope.show 设置为 true，这会覆盖进度条上的 ng-initialize .

相反，删除 ng-initialize="show=false;" 并将 $scope.show = true; 更改为 $scope.show = false;，这将停止在加载时显示进度条。

然而，执行此操作后，您会发现即使单击按钮后，您的进度条也根本不会显示。我们需要在某处设置 $scope.show = true; 并修复超时。

在您的 button 元素上将 ng-click="$timeout(generate, 5000);" 更改为 ng-click="generate()" 并在您的控制器中将您的 $scope.generate 功能更改为：

$scope.generate = function()
{
    $scope.show = true;

    $timeout(function()
    {
        var k = Math.floor(Math.random() * 10 + 1);

        if (k == $scope.userinput) {
            $scope.result = "Hooray! You won 000!";
        } else {
            $scope.result = "Lucky number generated: " + k + " Try again!";
        }
    }, 5000);
};

单击按钮时，这将首先显示进度条，然后触发超时延迟运行其余逻辑。

所有结果都应为 something like this。

Answer 2

试试http://victorbjelkholm.github.io/ngProgress/它很容易实现，如果你想的话你可以设置定时器，否则它会自动管理加载栏。

Answer 3

尝试angular material，它以所有这些进度条作为指令。我已经创建了一个代码笔，请看一下它可能会有所帮助

https://codepen.io/anon/pen/yzQypK?editors=1111

参考： https://material.angularjs.org/latest/demo/progressLinear

var app = angular.module('myApp', ['ngMaterial']);
app.controller('myCtrl', function($scope, $timeout, $interval) {
  $scope.show = true;

  $scope.$timeout = $timeout;

  $scope.determinateValue = 0;

  $scope.generate = function() {
    var k = Math.floor(Math.random() * 10 + 1);
    if (k == $scope.userinput) {
      $scope.result = "Hooray! You won 000!";
    } else {
      $scope.result = "Lucky number generated: " + k + "Try again!";
    }

    $interval.cancel(progress);
    $scope.determinateValue = 100;
  };

  var progress;
  $scope.startProgress = function(){
    $scope.result="";
    $scope.determinateValue = -5;
    progress = $interval(function() {
      $scope.determinateValue += 2;
    }, 90);
  }  
});

HTML

<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>

<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">  
  <md-input-container>
    <label>Enter number between 0-10</label>
    <input ng-model="userinput">
  </md-input-container>  
  <md-button md-raised ng-click="$timeout(generate, 5000); startProgress();">Generate</md-button>
  <br>
  <br>
  <md-progress-linear md-mode="determinate" value="{{determinateValue}}"></md-progress-linear>
  <div>{{result}}</div>
</div>

AngularJS幸运号码生成器：如何添加进度条动画？

AngularJS Lucky number generator: How to add progress bar animation?

angularjs

gambling