AngularJs的UI組件ui-Bootstrap分享（十三）——Progressbar

本文轉載自查看原文 2016-07-31 22:54 4090 AngularJs/ ui-bootstrap

進度條控件有兩種指令，第一種是uib-progressbar指令，表示單一顏色和進度的一個進度條。第二種是uib-bar和uib-progress指令，表示多種顏色和多個進度組合而成的一個進度條。

這是一個使用uib-progressbar指令的例子：

 1 <!DOCTYPE html>
 2 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <link href="/Content/bootstrap.css" rel="stylesheet" />
 6     <title></title>
 7 
 8     <script src="/Scripts/angular.js"></script>
 9     <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>
10     <script>
11  angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('ProgressDemoCtrl', function ($scope) { 12  $scope.val = 90; 13  }); 14     </script>
15 
16 </head>
17 <body>
18     <div ng-controller="ProgressDemoCtrl">
19         <uib-progressbar value="val" type="success">{{val}}%</uib-progressbar>
20     </div>
21 </body>
22 </html>

View Code

效果為：

其中，可使用的屬性有：

屬性名	默認值	備注
value		進度條當前的值
type	null	進度條類型，可設置為success, info, warning, danger
max	100	進度條的最大值
animate	true	是否啟用動畫
title	progressbar	輔助用的標題

另一種進度條是組合多個進度的進度條：

 1 <!DOCTYPE html>
 2 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <link href="/Content/bootstrap.css" rel="stylesheet" />
 6     <title></title>
 7 
 8     <script src="/Scripts/angular.js"></script>
 9     <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>
10     <script>
11  angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('ProgressDemoCtrl', function ($scope) { 12  $scope.bars = [ 13  { value: "30", type: "info" }, 14  { value: "30", type: "warning" }, 15  { value: "35", type: "danger" } 16  ]; 17  }); 18     </script>
19 
20 </head>
21 <body>
22     <div ng-controller="ProgressDemoCtrl">
23         <uib-progress>
24         <uib-bar ng-repeat="bar in bars track by $index" value="bar.value" type="{{bar.type}}">{{bar.value}}% 25             </uib-bar>
26         </uib-progress>
27     </div>
28 </body>
29 </html>