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 相关文章推荐
javascript中关于执行环境的杂谈
Aug 14 Javascript
js汉字转拼音实现代码
Feb 06 Javascript
jquery高效反选具体实现
May 05 Javascript
jQuery制作拼图小游戏
Jan 12 Javascript
JS实现控制表格行文本对齐的方法
Mar 30 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
Mar 13 Javascript
JavaScript数据结构之二叉树的计数算法示例
Apr 13 Javascript
JavaScript文件的同步和异步加载的实现代码
Aug 19 Javascript
react-native封装插件swiper的使用方法
Mar 20 Javascript
基于JavaScript canvas绘制贝塞尔曲线
Dec 25 Javascript
JavaScript适配器模式原理与用法实例详解
Mar 09 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
Apr 15 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
百度站点地图(百度sitemap)生成方法分享
2014/01/09 PHP
PHP数组的定义、初始化和数组元素的显示实现代码
2016/11/05 PHP
Docker配置PHP开发环境教程
2016/12/21 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
picChange 图片切换特效的函数代码
2010/05/06 Javascript
Javascript中定义方法的另类写法(批量定义js对象的方法)
2011/02/25 Javascript
javascript动态加载二
2012/08/22 Javascript
js setTimeout 常见问题小结
2013/08/13 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
Javascript实现返回上一页面并刷新的小例子
2013/12/11 Javascript
jquery实现ajax提交form表单的方法总结
2014/03/03 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
js动态创建标签示例代码
2014/06/09 Javascript
jQuery中append()方法用法实例
2015/01/08 Javascript
jQuery实现图片走马灯效果的原理分析
2016/01/16 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
2016/02/25 Javascript
纯JS实现表单验证实例
2016/12/24 Javascript
Bootstrap 手风琴菜单的实现代码
2017/01/20 Javascript
javascript 中的继承实例详解
2017/05/05 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
2018/10/15 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
js new Date()实例测试
2019/10/31 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
2020/06/04 Javascript
[01:18:36]LGD vs VP Supermajor 败者组决赛 BO3 第一场 6.10
2018/07/04 DOTA
Python WEB应用部署的实现方法
2019/01/02 Python
python 实现线程之间的通信示例
2020/02/14 Python
amazeui页面校验功能的实现代码
2020/08/24 HTML / CSS
夏威夷航空官网:Hawaiian Airlines
2016/09/11 全球购物
斯凯奇新西兰官网:SKECHERS新西兰
2018/02/22 全球购物
Expedia法国:全球最大在线旅游公司
2018/09/30 全球购物
教师优秀党员事迹材料
2014/08/14 职场文书
亲子运动会的活动方案
2014/08/17 职场文书
学校会议通知范文
2015/04/15 职场文书
爱国主义教育主题班会
2015/08/13 职场文书
解决Django transaction进行事务管理踩过的坑
2021/04/24 Python
无线电知识基础入门篇
2022/02/18 无线电