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 相关文章推荐
比较全面的event对像在IE与FF中的区别 推荐
Sep 21 Javascript
javascript客户端解决方案 缓存提供程序
Jul 14 Javascript
JavaScript通过正则表达式实现表单验证电话号码
Mar 07 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
Oct 31 Javascript
JavaScript中诡异的delete操作符
Mar 12 Javascript
JavaScript中的定时器之Item23的合理使用
Oct 30 Javascript
基于Layer+jQuery的自定义弹框
May 26 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
Feb 16 Javascript
Javascript实现时间倒计时效果
Jul 15 Javascript
js 获取html5的data属性实现方法
Jul 28 Javascript
基于webpack 实用配置方法总结
Sep 28 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
Feb 10 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异常处理技术,顶级异常处理器
2012/06/13 PHP
PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法
2014/12/25 PHP
php判断当前用户已在别处登录的方法
2015/01/06 PHP
PHPExcel内存泄漏问题解决方法
2015/01/23 PHP
php简单socket服务器客户端代码实例
2015/05/18 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
php7连接MySQL实现简易查询程序的方法
2020/10/13 PHP
Javascript this 的一些学习总结
2012/08/31 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
2013/08/21 Javascript
值得分享和收藏的Bootstrap学习教程
2016/05/12 Javascript
js 上传文件预览的简单实例
2016/08/16 Javascript
浅谈JS使用[ ]来访问对象属性
2016/09/21 Javascript
AngularJS中的JSONP实例解析
2016/12/01 Javascript
vue中引用阿里字体图标的方法
2018/02/10 Javascript
在Vant的基础上封装下拉日期控件的代码示例
2018/12/05 Javascript
Vue-cli3多页面配置详解
2020/03/22 Javascript
微信小程序图片右边加两行文字的代码
2020/04/23 Javascript
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python 文件操作实现代码
2009/10/07 Python
python 读写中文json的实例详解
2017/10/29 Python
Python排序搜索基本算法之归并排序实例分析
2017/12/08 Python
Python实现简单的文本相似度分析操作详解
2018/06/16 Python
利用Python将数值型特征进行离散化操作的方法
2018/11/06 Python
简单瞅瞅Python vars()内置函数的实现
2019/09/27 Python
在TensorFlow中屏蔽warning的方式
2020/02/04 Python
django 取消csrf限制的实例
2020/03/13 Python
django执行数据库查询之后实现返回的结果集转json
2020/03/31 Python
Cpython解释器中的GIL全局解释器锁
2020/11/09 Python
HTML5 canvas基本绘图之绘制线段
2016/06/27 HTML / CSS
工程师岗位职责规定
2014/02/26 职场文书
综合办公室主任岗位职责
2015/04/01 职场文书
2015年幼儿园班主任工作总结
2015/05/12 职场文书
活动主持人开场白
2015/05/28 职场文书
Java图书管理系统,课程设计必用(源码+文档)
2021/06/30 Java/Android