Angular implémente le partage de code de la fonction de barre de progression-js tutoriel-php.cn

Angular implémente le partage de code de la fonction de barre de progression

小云云

Libérer： 2018-02-23 09:51:09

original

1789 Les gens l'ont consulté

Le projet avait besoin d'une barre de progression, j'ai donc cherché des informations sur Internet pour apprendre. Cet article partagera avec vous le code d'implémentation de la fonction de barre de progression dans Angular.

Partie HTML :

<div ng-class="{progress: true, &#39;progress-striped&#39;: vm.striped}">
 <div ng-class="[&#39;progress-bar&#39;, vm.style]" ng-style="{width: vm.value + &#39;%&#39;}">
  <div ng-if="vm.showLabel">{{vm.value}}%</div>
 </div>
</div>
<h3>选项</h3>
<label>进度：<input type="number" class="form-control" ng-model="vm.value"/></label>
<button class="btn btn-primary" ng-click="vm.value=0">0%</button>
<button class="btn btn-primary" ng-click="vm.value=20">20%</button>
<button class="btn btn-primary" ng-click="vm.value=60">60%</button>
<button class="btn btn-primary" ng-click="vm.value=100">100%</button>
<hr/>
<label>斑马纹<input type="checkbox" ng-model="vm.striped"/></label>
<label>文字<input type="checkbox" ng-model="vm.showLabel"/></label>
<hr/>
<label>风格：
 <select ng-model="vm.style" class="form-control">
  <option value="progress-bar-success">progress-bar-success</option>
  <option value="progress-bar-info">progress-bar-info</option>
  <option value="progress-bar-danger">progress-bar-danger</option>
  <option value="progress-bar-warning">progress-bar-warning</option>
 </select>
</label>

Copier après la connexion

Partie JS :

&#39;use strict&#39;;
angular.module(&#39;ngShowcaseApp&#39;).controller(&#39;ctrl.show.progress&#39;, function ($scope) {
 var vm = $scope.vm = {};
 vm.value = 50;
 vm.style = &#39;progress-bar-info&#39;;
 vm.showLabel = true;
});

Copier après la connexion

Ici En fonction des besoins de mon propre projet, j'ai adapté une barre de progression simple qui peut être ajoutée au projet. Le début et la fin de la barre de progression sont décidés par moi-même.

1. code js

var myApp = angular.module(&#39;myApp&#39;, []);
myApp.controller(&#39;main&#39;, [&#39;$scope&#39;, &#39;$interval&#39;, function($scope, $interval){
  var vm = $scope.vm = {};
  vm.value = 0;
  vm.style = &#39;progress-bar-danger&#39;;
  vm.showLabel = true;
  vm.striped = true;
  $scope.selectValue = function (){
    console.log(vm.style);
  };
  var index = 0;
  var timeId = 500;
  $scope.count = function(){
    var start = $interval(function(){
      vm.value = ++index;
      if (index > 99) {
        $interval.cancel(start);
      }
      if (index == 60) {
        index = 99;
      }
    }, timeId);
  };
}]);

Copier après la connexion

2. code html

<div ng-class="{progress: true, &#39;progress-striped&#39;: vm.striped}" class="col-md-4">
   <div ng-class="[&#39;progress-bar&#39;, vm.style]" ng-style="{width: vm.value + &#39;%&#39;}">
      <div ng-if="vm.showLabel">{{vm.value}}%</div>
   </div>
</div>
<button class="btn btn-success" ng-click="count()">开始进度</button>

Copier après la connexion

Plus de contenu connexe sur AngularJS Intéressé les lecteurs peuvent consulter les sujets spéciaux sur ce site : "Résumé des compétences en matière d'opération de commande AngularJS", "Entrée AngularJS et didacticiel avancé" et "AngularJS Résumé de l'architecture MVC》

Recommandations associées :

Implémentation de l'applet WeChat du partage d'exemples de barre de progression circulaire

clip en CSS3 Implémentez la barre de progression en anneau

minuterie javascript pour implémenter la fonction de barre de progression

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!