AngularJS实现进度条功能示例


Posted in Javascript onJuly 05, 2017

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

一、功能描述:

① 通过select标签,可以为进度条选择不同的样式(颜色)

② 进度条的进度通过文本框里面的值改变(也可以快捷的选择几个特定的值)

③ 通过checkbox按钮,控制进度条上的文字是否显示

二、代码实现:

<!DOCTYPE html>
<html lang="en" ng-app='app'>
<head>
  <meta charset="UTF-8">
  <title>进度条</title>
  <script src='../js/angular.min.js'></script>
  <style>
    .progress{
      width:400px;
      border:1px solid #ccc;
      height: 28px;
      text-align: center;
      line-height: 28px;
      font-weight: bold;
      color: #fff;
      overflow: hidden;
    }
    .Bar{
      width:50%;
      height: 28px;
      background: #5BC0DE;
    }
    .blue{
      background: #5BC0DE;
    }
    .red{
      background: #D9534F;
    }
    .green{
      background: green;
    }
  </style>
</head>
<body ng-controller='progresscontro'>
  <div class="progress">
    <div ng-class="['Bar',vm.style]" ng-style="{width:vm.progress+'%'}">
      <div ng-if='vm.text'>{{vm.progress}}%</div>
    </div>
  </div>
  </br>
  <label>
    颜色:
    <select ng-model='vm.style'>
      <option value="red">red</option>
      <option value="green">green</option>
      <option value="blue">blue</option>
    </select>
  </label>
  </br></br>
  <label>进度:
    <input type="number" ng-model='vm.progress' ng-change="vm.myFunc()">
    <button ng-click='vm.progress=0'>0%</button>
    <button ng-click='vm.progress=20'>20%</button>
    <button ng-click='vm.progress=40'>40%</button>
    <button ng-click='vm.progress=60'>60%</button>
    <button ng-click='vm.progress=80'>80%</button>
  </label>
  </br></br>
  <label>
    是否显示文字:
    <input type="checkbox" ng-model='vm.text'>
  </label>
  <script>
   var app=angular.module('app',[]);
   app.controller('progresscontro',function($scope){
      var vm=$scope.vm={};
      vm.style='blue';
      vm.progress=50;
      vm.text=true;
      vm.myFunc=function(){
        if(vm.progress>100){
          vm.progress=100;
        }
        if(vm.progress<0){
          vm.progress=0;
        }
      }
   })
  </script>
</body>
</html>

demo预览:

AngularJS实现进度条功能示例

三、知识点分析

1、ng-class

ngclass实现有以下三种方式:

(1) 字符串形式:如果表达式求值为字符串,则字符串应为一个或多个空格分隔的类名。

<div ng-class="'red'"></div>

说明:字符串形式,每次只能绑定一个类名

(2) 数组形式:如果表达式求值为数组,则数组的每个元素应为一个字符串,该字符串是一个或多个空格分隔的类名。如下:

<div ng-class="['Bar',vm.style]" ng-style="{width:vm.progress+'%'}">
  <div ng-if='vm.text'>{{vm.progress}}%</div>
</div>

说明:数组中可以存放一个变量,但是字符串形式只能存放常量

(3) 对象:如果表达式计算为对象,则对于具有真值的对象的每个键值对,相应的键用作类名。

<div ng-class {'selected': isSelected, 'car': isCar}">

说明:当 isSelected = true 则增加selected class,当isCar=true,则增加car class,

2、ng-style

ng-style的属性值是一个对象,对象里的内容是以key->value的形式展现,key是属性,value是值,如下:

<div ng-class="['Bar',vm.style]" ng-style="{width:vm.progress+'%'}">
  <div ng-if='vm.text'>{{vm.progress}}%</div>
</div>

3、ng-if

ng-if 指令用于在表达式为 false 时,移除指定html元素,当表达式为true时,则添加移除的html元素,并显示,如下:

<div ng-if='vm.text'>{{vm.progress}}%</div>

说明:当vm.text为真时显示视图里面的内容,否则移除

4、ng-model

ng-model 指令绑定了 HTML 表单元素到 scope 变量中,如下:

<select ng-model='vm.style'>
  <option value="red">red</option>
  <option value="green">green</option>
  <option value="blue">blue</option>
</select>

说明:在select标签中,ng-model的值为所选择的option的value值

<input type="checkbox" ng-model='vm.text'>

说明:在checkbox中,ng-model的值为true或者false

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
IE8 兼容性问题(属性名区分大小写)
Jun 04 Javascript
关于html+ashx开发中几个问题的解决方法
Jul 18 Javascript
js控制浏览器全屏示例代码
Feb 20 Javascript
JavaScript利用正则表达式去除日期中的-
Jun 09 Javascript
JavaScript生成.xls文件的代码
Dec 22 Javascript
第一次记录Bootstrap table学习笔记(1)
May 18 Javascript
vue.js如何将echarts封装为组件一键使用详解
Oct 10 Javascript
JS实现带动画的回到顶部效果
Dec 28 Javascript
vue scroller返回页面记住滚动位置的实例代码
Jan 29 Javascript
javascript、php关键字搜索函数的使用方法
May 29 Javascript
layui多图上传实现删除功能的例子
Sep 23 Javascript
vue中可编辑树状表格的实现代码
Oct 31 Javascript
AngularJS实现tab选项卡的方法详解
Jul 05 #Javascript
angularjs2中父子组件的数据传递的实例代码
Jul 05 #Javascript
jQuery制作input提示内容(兼容IE8以上)
Jul 05 #jQuery
jQuery常见面试题之DOM操作详析
Jul 05 #jQuery
详解基于angular-cli配置代理解决跨域请求问题
Jul 05 #Javascript
微信小程序学习之数据处理详解
Jul 05 #Javascript
用node和express连接mysql实现登录注册的实现代码
Jul 05 #Javascript
You might like
PHP获取网卡地址的代码
2008/04/09 PHP
关于更改Zend Studio/Eclipse代码风格主题的介绍
2013/06/23 PHP
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
JQuery给元素添加/删除节点比如select
2013/04/02 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
jquery实现全选、反选、获得所有选中的checkbox
2020/09/13 Javascript
jQuery EasyUi实战教程之布局篇
2016/01/26 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
2016/08/05 Javascript
JS实现的全排列组合算法示例
2017/10/09 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
2019/09/26 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
2019/11/26 Javascript
详解JavaScript 作用域
2020/07/14 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
2020/09/08 Javascript
vue 数据操作相关总结
2020/12/17 Vue.js
[59:08]Ti4 冒泡赛第二天 NEWBEE vs Titan 2
2014/07/15 DOTA
[03:12]TI9战队档案 - Virtus Pro
2019/08/20 DOTA
[03:11]不朽宝藏三外观展示
2020/09/18 DOTA
python网络爬虫之如何伪装逃过反爬虫程序的方法
2017/11/23 Python
详解如何在python中读写和存储matlab的数据文件(*.mat)
2018/02/24 Python
单利模式及python实现方式详解
2018/03/20 Python
查看django版本的方法分享
2018/05/14 Python
Python3.6.0+opencv3.3.0人脸检测示例
2018/05/25 Python
python中正则表达式与模式匹配
2019/05/07 Python
pycharm修改file type方式
2019/11/19 Python
DataFrame.to_excel多次写入不同Sheet的实例
2019/12/02 Python
Django choices下拉列表绑定实例
2020/03/13 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
2018/10/08 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
2013/01/30 HTML / CSS
美国珠宝网上商店:Jeulia
2016/09/01 全球购物
FLOS美国官网:意大利高级照明工艺的传奇
2018/08/07 全球购物
杭州时比特电子有限公司SQL
2013/08/22 面试题
校运会口号
2014/06/18 职场文书
4S店销售内勤岗位职责
2015/04/13 职场文书
2015年幼儿教师个人工作总结
2015/05/20 职场文书
辛德勒的名单观后感
2015/06/03 职场文书