`
weitao1026
  • 浏览: 1048893 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论
阅读更多
项目里需要一个进度条,所以就在网上查找资料学习,看到了网友“雪狼”的代码分享,写的很高明,很精练,很厉害,原文链接:http://www.ngnice.com/showcase/#/show/progress,结合自己的项目需要,自己改编了个简单的进度条,可以加在项目里面,进度条的开始和结束由自己决定。


var myApp = angular.module('myApp', []);

myApp.controller('main', ['$scope', '$interval', function($scope, $interval){
    var vm = $scope.vm = {};
    vm.value = 0;
    vm.style = 'progress-bar-danger';
    vm.showLabel = true;
    vm.striped = true;

    $scope.selectValue = function (){
        console.log(vm.style);
    };
    var index = 0;
    var timeId = 500;
    $scope.count = function(){
        var start = $interval(function(){
            vm.value =  ++index;
            if (index > 99) {
                $interval.cancel(start);
            }
            if (index == 60) {
                index = 99;
            }
        }, timeId);
    };

}]);



2. [代码]html     
<div ng-class="{progress: true, 'progress-striped': vm.striped}" class="col-md-4">
      <div ng-class="['progress-bar', vm.style]" ng-style="{width: vm.value + '%'}">
            <div ng-if="vm.showLabel">{{vm.value}}%</div>
      </div>
</div>
<button class="btn btn-success" ng-click="count()">开始进度</button>

分享到:
评论

相关推荐

    AngularJS实现进度条功能示例

    在本示例中,我们通过使用AngularJS框架来实现一个动态的进度条功能,该进度条可以根据用户交互而变化。以下将详细介绍实现此功能的原理、相关知识点以及注意事项。 ### 功能描述 1. **样式选择**:进度条的样式...

    jquery和angularJS两种百分比进度条实现方式

    在本篇文章中,我们将探讨如何使用jQuery和AngularJS这两种流行的JavaScript库来实现百分比进度条。 首先,让我们了解jQuery的实现方式。jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理以及Ajax交互...

    Spring Boot+AngularJS+BootStrap实现进度条示例代码

    在本篇文章中,将介绍如何使用Spring Boot、AngularJS和Bootstrap来实现一个进度条的功能。 首先,了解Spring Boot是一种用来简化新Spring应用的初始搭建以及开发过程的框架。它利用了特定的方式来配置应用,通常...

    angular-circular-progress:创建圆形进度条的AngularJS模块

    创建圆形进度条的AngularJS模块 用法 下载 只需在您的页面中包含dist/circularProgress.min.js (或circularProgress.min.js ) 您还可以通过运行bower install angular-circular-progress来使用 用法 将angular-...

    6个非常经典Web前端使用的炫丽进度条(一)

    - 第三方框架:如Bootstrap、AngularJS、Vue.js等提供了内置的进度条组件,方便开发者快速集成。 3. **JQUERY插件**: - jQuery进度条插件,如`ProgressBar.js`,提供了丰富的自定义选项和动画效果,适用于各种...

    springmvc带进度条上传源码

    - 进度条功能主要在前端实现,通过JavaScript(例如jQuery或AngularJS)监听文件API的`progress`事件来获取上传进度。 - 当文件被分成多个部分上传时,`progress`事件会提供已上传的数据量和总数据量,从而更新...

    angularjs文件上传插件

    AngularJS 文件上传插件是基于 AngularJS 框架开发的一种功能组件,它极大地简化了在 Web 应用中处理文件上传的过程。AngularJS 是一个强大的前端JavaScript框架,由Google维护,它提供了一种模块化、数据绑定和依赖...

    angularjs实现上传图片并且预览

    在实际项目中,你可能还需要考虑错误处理、多文件上传、进度条显示等功能,以及安全性问题,比如防止跨站脚本攻击(XSS)和跨站请求伪造(CSRF)。在开发过程中,确保遵循最佳实践,为用户提供安全、流畅的体验。

    简洁AngularJS框架后台管理系统bootstrap后台模板

    8. 自定义组件:可能包括进度条、时间线、滑块等,根据实际需求定制。 在实际使用过程中,开发者需要根据自己的业务需求对模板进行扩展和定制。例如,添加新的API接口以与服务器进行通信,调整样式以符合企业品牌...

    带进度条说明的图片切换效果

    4. **数据绑定**:如果图片数量较多,我们可以使用数据绑定技术(如AngularJS或Vue.js)来动态加载和切换图片,同时更新进度条的值。这使得代码更加模块化,更容易维护。 5. **事件监听**:通过监听用户的行为,如...

    一款好用的进度条插件

    在实际开发中,pace.js还可以与其他前端框架如Bootstrap、AngularJS等无缝集成,提供一致的加载体验。同时,如果你的项目使用了模块化构建工具如Webpack或Browserify,pace.js也可以通过npm或yarn安装并按需引入。 ...

    webapi+AngularJs上传附件

    为了提高用户体验,可以使用AngularJS的`ng-file-upload`库,它提供了更高级的功能,如进度条、取消上传和预览。这个库已经封装好了与后端交互的复杂逻辑,使得前端代码更简洁。 在HTML模板中,`ng-file-upload`库...

    angularJS和bootstrap实现多文件上传

    同时,Bootstrap还提供了诸如模态框(Modal)和进度条(Progress Bar)等组件,可以用来展示文件上传的进度和状态。 例如,当用户选择文件后,我们可以显示一个模态框,实时更新每个文件的上传进度: ```html ...

    angularjs 文件上传

    CSS和JS目录中的文件可能包含了样式和额外的功能增强,例如进度条显示、错误提示等。在`js`目录下,可能有用于处理文件选择、进度更新和错误处理的辅助函数。CSS文件则用于美化上传界面。 总之,使用AngularJS进行...

    angularJS loadingbar

    Loadingbar则是AngularJS生态系统中的一个插件,它为开发者提供了一种简单的方式来添加进度条,展示应用中的HTTP请求过程。 **主要功能和特点** 1. **自动检测HTTP请求**:AngularJS Loadingbar能够自动监听所有的...

    angular-round-progress:使用画布的 AngularJS 的小圆形进度条指令

    角圆进度使用 Angular JS 的圆形进度条使用安装 angular-round-progress 。$ bower install angular-round-progress --save快速开始将这些库添加到您的页面: &lt; link href =" bower_components/angular-round-...

    AngularJS封装jQuery-File-Upload

    jQuery-File-Upload则是流行的文件上传插件,它支持多文件选择、进度条显示、预览、删除等功能,且兼容各种浏览器。 这篇名为“AngularJS封装jQuery-File-Upload”的博文主要探讨了如何将jQuery-File-Upload的功能...

    ProfileImageUpload-AngularJS-源码.rar

    《AngularJS实现用户头像上传功能详解》 在现代Web应用开发中,用户头像上传是一项常见的功能,它能够提供个性化的用户体验,并帮助用户更好地识别彼此。本篇文章将深入探讨如何利用AngularJS这一强大的前端框架来...

Global site tag (gtag.js) - Google Analytics