Question

我是angularjs的新手。我编写了这个幸运数字生成器应用程序，在点击＆＃34生成＆＃34; 5秒后生成幸运数字。按钮。我想添加一个在5s持续时间内完成的进度条，然后显示结果。只要页面加载，就会显示当前进度条。怎么避免这个？

＆＃13;

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 $10000!";
    } else {
      $scope.result = "Lucky number generated: " + k + "Try again!";
    }

  };
});

＆＃13;

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

＆＃13;

Answer 1

条形图直接显示的原因是因为您在加载控制器时将$scope.show设置为true，这会覆盖进度条上的ng-initialize。< / p>

相反，请删除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 $10000!";
        } else {
            $scope.result = "Lucky number generated: " + k + " Try again!";
        }
    }, 5000);
};

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

哪一切都应该导致something like this。

Answer 2

试一试http://victorbjelkholm.github.io/ngProgress/它很容易实现，您可以根据需要设置计时器，否则它会自动管理加载栏。

Answer 3

尝试使用角度素材，将所有这些进度条作为指令。我已经创建了一个代码笔，请看看它可能会有所帮助

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 $10000!";
    } 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幸运数字生成器：如何添加进度条动画？

3 个答案: