正文

angularjs的ui组件ui-bootstrap分享（十三）——progressbar

codeingorartist?  2022-02-10  369

关键词：

原文地址：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分享——accordion

原文地址：http://www.cnblogs.com/pilixiami/p/5599295.htmlAccordion手风琴控件使用uib-accordion和uib-accordion-group指令。 <script>angular.module(‘myApp‘,[‘ui.bootstrap‘]).controller(‘AccordionDemoCtrl‘,func 查看详情

angularjs的ui组件ui-bootstrap分享——collapse

原文地址：http://www.cnblogs.com/pilixiami/p/5597837.htmlCollapse折叠控件使用uib-collapse指令 <!DOCTYPEhtml><htmlng-app="ui.bootstrap.demo"xmlns="http://www.w3.org/1999/xhtml"><head><meta 查看详情

angularjs的ui组件ui-bootstrap分享——model

原文地址：http://www.cnblogs.com/pilixiami/p/5677515.htmlModel是用来创建模态窗口的，但是实际上，并没有Model指令，而只有$uibModal服务，创建模态窗口是使用$uibModal.open()方法。创建模态窗口时，要有一个模态窗口的模板和对应的控制器... 查看详情

angularjs的ui组件ui-bootstrap分享——tabs

原文地址：http://www.cnblogs.com/pilixiami/p/5635137.htmltabs控件使用uib-tabset指令和uib-tab指令，效果是这样的： <!DOCTYPEhtml><htmlng-app="ui.bootstrap.demo"xmlns="http://www.w3.org/1999/xhtml"><head&g 查看详情

angularjs的ui组件ui-bootstrap分享——alert

原文地址：http://www.cnblogs.com/pilixiami/p/5699573.htmlalert指令会在页面上显示一条提示消息，效果是这样：代码为： <!DOCTYPEhtml><htmlng-app="ui.bootstrap.demo"xmlns="http://www.w3.org/1999/xhtml"><head><m 查看详情

angularjs的ui组件ui-bootstrap分享（十四）——carousel

原文地址：http://www.cnblogs.com/pilixiami/p/5724314.htmlCarousel指令是用于图片轮播的控件，引入ngTouch模块后可以在移动端使用滑动的方式使用轮播控件。 <!DOCTYPEhtml><htmlng-app="ui.bootstrap.demo"xmlns="http://www.w3.org/1999/xhtml 查看详情

angularjs的ui组件ui-bootstrap分享（十三）——progressbar

原文地址：http://www.cnblogs.com/pilixiami/p/5723593.html进度条控件有两种指令，第一种是uib-progressbar指令，表示单一颜色和进度的一个进度条。第二种是uib-bar和uib-progress指令，表示多种颜色和多个进度组合而成的一个进度条。这是一个... 查看详情

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

】ui-router中的AngularJS组件/范围问题【英文标题】：AngularJScomponent/scopeissueinui-router【发布时间】：2019-07-1608:34:08【问题描述】：更改状态后，我在使用ui-router和angularjs范围时遇到问题-新创建的范围使用旧控制器（反之亦然）。我... 查看详情

angularjs的ui组件ui-bootstrap分享——tooltip和popover

原文地址：http://www.cnblogs.com/pilixiami/p/5661600.htmltooltip和popover是轻量的、可扩展的、用于提示的指令。对于移动端来讲，这两个指令虽然可以正常工作，但是从用户体验的角度并不推荐使用。先说tooltip，tooltip有三种使用方式... 查看详情

angularjs的ui组件ui-bootstrap分享——pager和pagination

原文地址：http://www.cnblogs.com/pilixiami/p/5634405.htmlui-bootstrap中有两个分页控件，一个是轻量级的Pager，只有上一页和下一页的功能，另一个是功能完整的Pagination，除了上一页和下一页，还可以选择首页和最后页，并且支持多种页数... 查看详情

angularjs的ui组件ui-bootstrap分享——buttons和dropdown

原文地址：http://www.cnblogs.com/pilixiami/p/5636218.html 在ui-Bootstrap中，Buttons控件和Dropdown控件与form表单中的按钮和下拉框名字很像，但实际上这两个控件有新的含义。先说Buttons，它是一组按钮，用来实现form表单中的单选框和... 查看详情

angularjs的ui组件ui-bootstrap分享——buttons和dropdown

原文地址：http://www.cnblogs.com/pilixiami/p/5636218.html在ui-Bootstrap中，Buttons控件和Dropdown控件与form表单中的按钮和下拉框名字很像，但实际上这两个控件有新的含义。先说Buttons，它是一组按钮，用来实现form表单中的单选框和复选框的... 查看详情

angularjs的ui组件ui-bootstrap分享——tabs

tabs控件使用uib-tabset指令和uib-tab指令，效果是这样的：1<!DOCTYPEhtml>2<htmlng-app="ui.bootstrap.demo"xmlns="http://www.w3.org/1999/xhtml">3<head>4<metahttp-equiv="Content-Type"content="text/html; 查看详情

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

】requirejs和angularjs1.5注入ui.router组件失败【英文标题】：requirejsandangularjs1.5injectionofui.routerfailingforcomponents【发布时间】：2016-11-0921:59:04【问题描述】：使用推荐的组件加载方法时出现此错误(Seestep3)Error:Modulename"angular-ui-router"hasno... 查看详情

angularjs的ui组件ui-bootstrap分享——pager和pagination

ui-bootstrap中有两个分页控件，一个是轻量级的Pager，只有上一页和下一页的功能，另一个是功能完整的Pagination，除了上一页和下一页，还可以选择首页和最后页，并且支持多种页数的显示方式。这是Pager的例子：1<!DOCTYPEhtml>2... 查看详情

angularjs的ui组件ui-bootstrap分享——buttons和dropdown

在ui-Bootstrap中，Buttons控件和Dropdown控件与form表单中的按钮和下拉框名字很像，但实际上这两个控件有新的含义。先说Buttons，它是一组按钮，用来实现form表单中的单选框和复选框的功能，样式上可以自定义，功能也可以扩展，可... 查看详情

AngularJS 1.5- ui-router：在状态内调用组件，父级不起作用

】AngularJS1.5-ui-router：在状态内调用组件，父级不起作用【英文标题】：AngularJS1.5-ui-router:callingacomponentinsideofastate,withaparentnotworking【发布时间】：2017-02-1903:14:00【问题描述】：我正在使用angularJs1.5。我遇到的问题是当我用组件调... 查看详情

angularjs学习笔记--组件$http$qmodule

1-组件创建组件，使用angularjs模块的conponent()方法，component(name,options);使用编译器注册组件定义，表示应用程序中的一个独立的UI组件。组件定义通常仅由模板和控制器组成。name为组件名，options为组件定义对象，其... 查看详情