ホームページ > 記事 > ウェブフロントエンド > Angular はプログレスバー関数のコード共有を実装します
このプロジェクトには進行状況バーが必要なので、インターネットで情報を探しました。この記事では、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 コード
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 コード
<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アーキテクチャの概要》
関連する推奨事項:
以上がAngular はプログレスバー関数のコード共有を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。