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 相关文章推荐
jQuery 1.7.2中getAll方法的疑惑分析
May 23 Javascript
node.js中的fs.closeSync方法使用说明
Dec 17 Javascript
AngularJS基础学习笔记之控制器
May 10 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
Aug 10 Javascript
JS实现页面载入时随机显示图片效果
Sep 07 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
Nov 23 Javascript
BootStrapTable服务器分页实例解析
Dec 20 Javascript
ES2015 Symbol 一种绝不重复的值
Dec 25 Javascript
ajax实现动态下拉框示例
Jan 10 Javascript
数组Array的一些方法(总结)
Feb 17 Javascript
jquery 手势密码插件
Mar 17 Javascript
vue src动态加载请求获取图片的方法
Oct 17 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出现web系统多域名登录失败的解决方法
2014/09/30 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
JavaScript入门教程(7) History历史对象
2009/01/31 Javascript
js 覆盖和重载 函数
2009/09/25 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
javascript自定义in_array()函数实现方法
2015/08/03 Javascript
jquery对象和DOM对象的相互转换详解
2016/10/18 Javascript
bootstrap table实例详解
2017/01/06 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
2017/01/13 Javascript
vue修改vue项目运行端口号的方法
2017/08/04 Javascript
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
vue添加axios,并且指定baseurl的方法
2018/09/19 Javascript
在nuxt中使用路由重定向的实例
2020/11/06 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
Python ORM框架SQLAlchemy学习笔记之关系映射实例
2014/06/10 Python
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
Python字符串切片操作知识详解
2016/03/28 Python
Python Paramiko模块的安装与使用详解
2016/11/18 Python
在Python中使用defaultdict初始化字典以及应用方法
2018/10/31 Python
用Python实现校园通知更新提醒功能
2019/11/23 Python
在Python中用GDAL实现矢量对栅格的切割实例
2020/03/11 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
CSS3 实现的缩略图悬停效果
2020/12/09 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
2018/09/06 HTML / CSS
小区推广策划方案
2014/06/06 职场文书
土建施工员岗位职责
2014/07/16 职场文书
甜品蛋糕店创业计划书
2014/09/21 职场文书
中班教师个人总结
2015/02/05 职场文书
教师年度考核个人总结
2015/02/12 职场文书
应聘教师自荐信
2015/03/26 职场文书
2016公司中秋节寄语
2015/12/07 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
PostgreSQL怎么创建分区表详解
2022/06/25 PostgreSQL