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 相关文章推荐
用js查找法实现当前栏目的高亮显示的代码
Nov 24 Javascript
javascript得到XML某节点的子节点个数的脚本
Oct 11 Javascript
Array.prototype 的泛型应用分析
Apr 30 Javascript
IFrame跨域高度自适应实现代码
Aug 16 Javascript
关于使用 jBox 对话框的提交不能弹出问题解决方法
Nov 07 Javascript
下一代Bootstrap的5个特点 超酷炫!
Jun 17 Javascript
浅谈Vue 初始化性能优化
Aug 31 Javascript
node.js基于express使用websocket的方法
Nov 09 Javascript
原生JavaScript实现Ajax异步请求
Nov 19 Javascript
React router动态加载组件之适配器模式的应用详解
Sep 12 Javascript
vue实现拖拽的简单案例 不超出可视区域
Jul 25 Javascript
layer 刷新某个页面的实现方法
Sep 05 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
冰滴咖啡制作步骤
2021/03/03 冲泡冲煮
php用正则表达式匹配中文实例详解
2013/11/06 PHP
PHP新特性详解之命名空间、性状与生成器
2017/07/18 PHP
PHP分享图片的生成方法
2018/04/25 PHP
Laravel5.4框架使用socialite实现github登录的方法
2019/03/20 PHP
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
2014/11/10 Javascript
JS设置网页图片vspace和hspace属性的方法
2015/04/01 Javascript
JavaScript动态创建div等元素实例讲解
2016/01/06 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
JS扩展类,克隆对象与混合类实例分析
2016/11/26 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
javaScript 逻辑运算符使用技巧整理
2017/05/03 Javascript
angularjs http与后台交互的实现示例
2018/12/21 Javascript
详解JWT token心得与使用实例
2019/08/02 Javascript
一看就会的vuex实现登录验证(附案例)
2020/01/09 Javascript
[01:15:36]加油刀塔第二期网络版
2014/08/09 DOTA
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
给Python中的MySQLdb模块添加超时功能的教程
2015/05/05 Python
Python中多线程的创建及基本调用方法
2016/07/08 Python
Python实现希尔排序算法的原理与用法实例分析
2017/11/23 Python
对python中的 os.mkdir和os.mkdirs详解
2018/10/16 Python
解决Pycharm出现的部分快捷键无效问题
2018/10/22 Python
利用Python实现原创工具的Logo与Help
2018/12/03 Python
python如何删除文件中重复的字段
2019/07/16 Python
python matplotlib拟合直线的实现
2019/11/19 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
美国在线面料商店:Fashion Fabrics Club
2020/01/31 全球购物
Piercing Pagoda官网:耳环、戒指、项链、手链等
2020/09/28 全球购物
C#笔试题集合
2013/06/21 面试题
教师求职信范文
2014/05/24 职场文书
人事任命书格式
2014/06/05 职场文书
岳麓书院导游词
2015/02/03 职场文书
2015年酒店年度工作总结
2015/05/23 职场文书