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

Posted 2020-09-13 codeing or artist ?

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AngularJs的UI组件ui-Bootstrap分享（十三）——Progressbar相关的知识，希望对你有一定的参考价值。

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

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

效果为：

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

以上是关于AngularJs的UI组件ui-Bootstrap分享（十三）——Progressbar的主要内容，如果未能解决你的问题，请参考以下文章

ui-router 中的 AngularJS 组件/范围问题

requirejs 和 angularjs 1.5 注入 ui.router 组件失败

Angularjs中使用ui-route如何异步加载组件？

AngularJs的UI组件ui-Bootstrap分享——Accordion

AngularJs的UI组件ui-Bootstrap分享——Datepicker Popup