Angular implementiert die Codefreigabe für die Fortschrittsbalkenfunktion-js-Tutorial-php.cn

Angular implementiert die Codefreigabe für die Fortschrittsbalkenfunktion

小云云

Freigeben： 2018-02-23 09:51:09

Original

1790 Leute haben es durchsucht

Das Projekt benötigte einen Fortschrittsbalken, daher habe ich im Internet nach Informationen gesucht, um mehr über den Code zur Implementierung der Fortschrittsbalkenfunktion in Angular zu erfahren.

HTML-Teil:

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

Nach dem Login kopieren

JS-Teil:

&#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;
});

Nach dem Login kopieren

Hier Basierend auf meinen eigenen Projektanforderungen habe ich einen einfachen Fortschrittsbalken angepasst, der dem Projekt hinzugefügt werden kann. Der Anfang und das Ende des Fortschrittsbalkens werden von mir selbst festgelegt.

1. js-Code

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);
  };
}]);

Nach dem Login kopieren

2. HTML-Code

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

Nach dem Login kopieren

Weitere verwandte Inhalte zu AngularJS Interessiert Leser können sich die speziellen Themen auf dieser Website ansehen: „Zusammenfassung der AngularJS-Befehlsbedienungsfähigkeiten“, „AngularJS-Einstieg und erweitertes Tutorial“ und „AngularJS Zusammenfassung der MVC-Architektur》

Verwandte Empfehlungen:

WeChat-Applet-Implementierung der kreisförmigen Fortschrittsbalken-Beispielfreigabe

Clip in CSS3 Implementieren Sie den Ring-Fortschrittsbalken

Javascript-Timer, um die Fortschrittsbalkenfunktion zu implementieren

Das obige ist der detaillierte Inhalt vonAngular implementiert die Codefreigabe für die Fortschrittsbalkenfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!