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

2023-08-30 12:36:58

进度条控件有两种指令，第一种是uib-progressbar指令，表示单一颜色和进度的一个进度条。第二种是uib-bar和uib-progress指令，表示多种颜色和多个进度组合而成的一个进度条。

这是一个使用uib-progressbar指令的例子：

 <!DOCTYPE html>

 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <link href="/Content/bootstrap.css" rel="stylesheet" />

     <title></title>

     <script src="/Scripts/angular.js"></script>

     <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>

     <script>

         angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('ProgressDemoCtrl', function ($scope) {

             $scope.val = 90;

         });

     </script>

 </head>

 <body>

     <div ng-controller="ProgressDemoCtrl">

         <uib-progressbar value="val" type="success">{{val}}%</uib-progressbar>

     </div>

 </body>

 </html>

效果为：

其中，可使用的属性有：

属性名	默认值	备注
value		进度条当前的值
type	null	进度条类型，可设置为success, info, warning, danger
max	100	进度条的最大值
animate	true	是否启用动画
title	progressbar	辅助用的标题

另一种进度条是组合多个进度的进度条：

 <!DOCTYPE html>

 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <link href="/Content/bootstrap.css" rel="stylesheet" />

     <title></title>

     <script src="/Scripts/angular.js"></script>

     <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>

     <script>

         angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('ProgressDemoCtrl', function ($scope) {

             $scope.bars = [

                 { value: "30", type: "info" },

                 { value: "30", type: "warning" },

                 { value: "35", type: "danger" }

             ];

         });

     </script>

 </head>

 <body>

     <div ng-controller="ProgressDemoCtrl">

         <uib-progress>

         <uib-bar ng-repeat="bar in bars track by $index" value="bar.value" type="{{bar.type}}">{{bar.value}}%

             </uib-bar>

         </uib-progress>

     </div>

 </body>

 </html>