프로젝트에는 진행률 표시줄이 필요하므로 알아보기 위해 인터넷에서 정보를 검색했습니다. 이번 글에서는 Angular에서 진행률 표시줄 기능을 구현하는 코드를 공유해 드리겠습니다.
HTML 부분:
<div ng-class="{progress: true, 'progress-striped': vm.striped}"> <div ng-class="['progress-bar', vm.style]" ng-style="{width: vm.value + '%'}"> <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 부분:
?
'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; });
내 프로젝트 요구에 따라 프로젝트의 시작과 끝을 추가할 수 있는 간단한 진행률 표시줄을 직접 조정했습니다. 진행률 표시줄은 스스로 결정합니다.
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, 'progress-striped': vm.striped}" class="col-md-4"> <div ng-class="['progress-bar', vm.style]" ng-style="{width: vm.value + '%'}"> <div ng-if="vm.showLabel">{{vm.value}}%</div> </div> </div> <button class="btn btn-success" ng-click="count()">开始进度</button>
AngularJS와 관련된 더 많은 콘텐츠에 관심이 있는 독자는 이 사이트의 특별 주제인 "AngularJS 명령 작동 기술 요약"을 확인할 수 있습니다. AngularJS 시작 및 고급 시작하기" 튜토리얼" 및 "AngularJS MVC 아키텍처 요약》
관련 권장 사항:
WeChat 애플릿에서 순환 진행률 표시줄 구현 공유 예
javascript 타이머가 진행률 표시줄 기능을 구현함
위 내용은 Angular는 진행률 표시줄 기능 코드 공유를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!