Angular实现的进度条功能示例


Posted in Javascript onFebruary 18, 2018

本文实例讲述了Angular实现的进度条功能。分享给大家供大家参考,具体如下:

项目里需要一个进度条,所以就在网上查找资料学习,看到了网友“雪狼”的代码分享,写的很高明,很精练,很厉害,原文中的代码如下:

HTML部分:

<div ng-class="{progress: true, 'progress-striped': vm.striped}">
 <div ng-class="['progress-bar', vm.style]" ng-style="{width: vm.value + '%'}">
  <div ng-if="vm.showLabel">{{vm.value}}%</div>
 </div>
</div>
<h3>选项</h3>
<label>进度:<input type="number" class="form-control" ng-model="vm.value"/></label>
<button class="btn btn-primary" ng-click="vm.value=0">0%</button>
<button class="btn btn-primary" ng-click="vm.value=20">20%</button>
<button class="btn btn-primary" ng-click="vm.value=60">60%</button>
<button class="btn btn-primary" ng-click="vm.value=100">100%</button>
<hr/>
<label>斑马纹<input type="checkbox" ng-model="vm.striped"/></label>
<label>文字<input type="checkbox" ng-model="vm.showLabel"/></label>
<hr/>
<label>风格:
 <select ng-model="vm.style" class="form-control">
  <option value="progress-bar-success">progress-bar-success</option>
  <option value="progress-bar-info">progress-bar-info</option>
  <option value="progress-bar-danger">progress-bar-danger</option>
  <option value="progress-bar-warning">progress-bar-warning</option>
 </select>
</label>

JS部分:

'use strict';
angular.module('ngShowcaseApp').controller('ctrl.show.progress', function ($scope) {
 var vm = $scope.vm = {};
 vm.value = 50;
 vm.style = 'progress-bar-info';
 vm.showLabel = true;
});

这里结合自己的项目需要,自己改编了个简单的进度条,可以加在项目里面,进度条的开始和结束由自己决定。

1. js代码

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程序设计有所帮助。

Javascript 相关文章推荐
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
Dec 29 Javascript
jQuery中与toggleClass等价的程序段 以及未来学习的方向
Mar 18 Javascript
JavaScript的继承的封装介绍
Oct 15 Javascript
jQuery产品间断向下滚动效果核心代码
May 08 Javascript
一个通过script自定义属性传递配置参数的方法
Sep 15 Javascript
Javascript获取统一管理的提示语(message)
Feb 03 Javascript
jquery中取消和绑定hover事件的实现代码
Jun 02 Javascript
bootstarp modal框居中显示的实现代码
Feb 18 Javascript
微信小程序之多文件下载的简单封装示例
Jan 29 Javascript
vue.js中$set与数组更新方法
Mar 08 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
Nov 07 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
May 09 Javascript
Angular2.0实现modal对话框的方法示例
Feb 18 #Javascript
JS实现运动缓冲效果的封装函数示例
Feb 18 #Javascript
Vue底层实现原理总结
Feb 17 #Javascript
js实现控制文件拖拽并获取拖拽内容功能
Feb 17 #Javascript
图文介绍Vue父组件向子组件传值
Feb 17 #Javascript
JavaScript异步加载问题总结
Feb 17 #Javascript
js装饰设计模式学习心得
Feb 17 #Javascript
You might like
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
[原创]php使用strpos判断字符串中数字类型子字符串出错的解决方法
2017/04/01 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
2009/10/11 Javascript
js中if语句的几种优化代码写法
2011/03/12 Javascript
js实现一个省市区三级联动选择框代码分享
2013/03/06 Javascript
Javascript单元测试框架QUnitjs详细介绍
2014/05/08 Javascript
js实现鼠标感应图片展示的方法
2015/02/27 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
JS中递归函数
2016/06/17 Javascript
jquery.Callbacks的实现详解
2016/11/30 Javascript
bootstrap配合Masonry插件实现瀑布式布局
2017/01/18 Javascript
nodejs基础应用
2017/02/03 NodeJs
五步轻松实现zTree的使用
2017/11/01 Javascript
VueJs组件之父子通讯的方式
2018/05/06 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
生成无限制的微信小程序码的示例代码
2019/09/20 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
2020/06/15 Javascript
如何将Node.js中的回调转换为Promise
2020/11/10 Javascript
Python中字典(dict)和列表(list)的排序方法实例
2014/06/16 Python
python处理PHP数组文本文件实例
2014/09/18 Python
使用python读取txt文件的内容,并删除重复的行数方法
2018/04/18 Python
Python面向对象之类的定义与继承用法示例
2019/01/14 Python
python程序输出无内容的解决方式
2020/04/09 Python
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
2020/05/12 Python
如何写python的配置文件
2020/06/07 Python
python爬虫中PhantomJS加载页面的实例方法
2020/11/12 Python
达拉斯牛仔官方商店:Dallas Cowboys Pro Shop
2018/02/10 全球购物
PHP如何去执行一个SQL语句
2016/03/05 面试题
物流合作计划书
2014/01/10 职场文书
社区服务活动总结
2014/05/07 职场文书
财务管理专业毕业生求职信
2014/06/02 职场文书
领导班子三严三实心得体会
2014/10/13 职场文书
公司财务经理岗位职责
2015/04/08 职场文书
2015年双拥工作总结
2015/04/08 职场文书
小学班主任心得体会
2016/01/07 职场文书