Angular implementiert die Codefreigabe für die Fortschrittsbalkenfunktion

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>

JS-Teil:

?

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

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('myApp', []);
myApp.controller('main', ['$scope', '$interval', function($scope, $interval){
  var vm = $scope.vm = {};
  vm.value = 0;
  vm.style = 'progress-bar-danger';
  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);
  };
}]);

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>

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!