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 相关文章推荐
简单实用的全选反选按钮例子
Oct 18 Javascript
JavaScript 基本概念
Jan 20 Javascript
jquery实现表单验证简单实例演示
Nov 23 Javascript
js 动态给元素添加、移除事件的实现方法
Jul 19 Javascript
json定义及jquery操作json的方法
Sep 29 Javascript
jQuery中DOM节点删除之empty与remove
Jan 20 Javascript
js实现年月日表单三级联动
Apr 17 Javascript
详解angularjs利用ui-route异步加载组件
May 21 Javascript
分析javascript中9 个常见错误阻碍你进步
Sep 18 Javascript
Node.js搭建WEB服务器的示例代码
Aug 15 Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 Javascript
微信小程序点击滚动到指定位置的实现
May 22 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解析url的三个示例
2014/01/20 PHP
php的curl封装类用法实例
2014/11/07 PHP
对PHP PDO的一些认识小结
2015/01/23 PHP
在网页中屏蔽快捷键
2006/09/06 Javascript
getElementById在任意一款浏览器中都可以用吗的疑问回复
2007/05/13 Javascript
jQuery代码优化 事件委托篇
2011/11/01 Javascript
js运动框架_包括图片的淡入淡出效果
2013/05/11 Javascript
JS获取IP、MAC和主机名的五种方法
2013/11/14 Javascript
JavaScript 获取任一float型小数点后两位的小数
2014/06/30 Javascript
jquery实现触发时更新下拉列表内容的方法
2015/12/02 Javascript
JavaScript模拟鼠标右键菜单效果
2020/12/08 Javascript
功能强大的Bootstrap效果展示(二)
2016/08/03 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
2016/09/05 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
2017/05/02 Javascript
nodejs发送http请求时遇到404长时间未响应的解决方法
2017/12/10 NodeJs
jQuery实现常见的隐藏与展示列表效果示例
2018/06/04 jQuery
Mint UI组件库CheckList使用及踩坑总结
2018/12/20 Javascript
JavaScript事件对象深入详解
2018/12/30 Javascript
详解微信小程序开发之formId使用(模板消息)
2019/08/27 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
2021/03/01 jQuery
python之验证码生成(gvcode与captcha)
2019/01/02 Python
Python利用逻辑回归模型解决MNIST手写数字识别问题详解
2020/01/14 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
灵活运用CSS3特性绘制简易版围棋效果
2016/09/28 HTML / CSS
Html5自定义字体解决方法
2019/10/09 HTML / CSS
abstract是什么意思
2012/02/12 面试题
拉丁舞学习者的自我评价
2013/10/27 职场文书
竟聘演讲稿范文
2013/12/31 职场文书
打架检讨书800字
2014/01/10 职场文书
餐厅销售主管职责范本
2014/02/19 职场文书
《画》教学反思
2014/04/14 职场文书
本科毕业生自荐信
2014/06/02 职场文书
杭白菊导游词
2015/02/10 职场文书
用CSS3画一个爱心
2021/04/27 HTML / CSS
JavaScript的Set数据结构详解
2022/02/18 Javascript