1

我是 angularjs 的新手。我已经编写了这个幸运数字生成器应用程序，它在单击“生成”按钮后 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 $10000!";
    } 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>

4

3 回答 3

0

该条立即出现的原因是因为您设置$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 $10000!";
        } else {
            $scope.result = "Lucky number generated: " + k + " Try again!";
        }
    }, 5000);
};

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

这都应该导致这样的结果。

于 2017-10-16T14:12:44.167 回答
0

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

于 2017-10-16T14:22:54.600 回答
0

试试 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 $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>
于 2017-10-16T15:48:42.100 回答