码迷,mamicode.com
首页 > Web开发 > 详细

AngularJs的UI组件ui-Bootstrap分享(十三)——Progressbar

时间:2016-08-01 00:19:59      阅读:183      评论:0      收藏:0      [点我收藏+]

标签:

进度条控件有两种指令,第一种是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>
View Code

效果为:技术分享

uib-progress可使用的属性有:max、animate、title,uib-bar可使用的属性有value、type、title,这些属性的用法和uib-progressbar一样。

 

AngularJs的UI组件ui-Bootstrap分享(十三)——Progressbar

标签:

原文地址:http://www.cnblogs.com/pilixiami/p/5723593.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!