AngularJS实现进度条功能示例

更新时间：2017年07月05日 12:04:47 作者：Annexu1991

这篇文章主要介绍了AngularJS实现进度条功能,结合具体完整实例形式分析了AngularJS实现进度条功能的原理、相关知识点与注意事项,需要的朋友可以参考下

本文实例讲述了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预览：

三、知识点分析

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相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

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

您可能感兴趣的文章:

详解angular笔记路由之angular-router
本篇文章主要介绍了详解angular笔记路由之angular-router，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
angular *Ngif else用法详解
这篇文章主要介绍了angular *Ngif else用法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-12-12
Angular 5.x 学习笔记之Router(路由)应用
本篇文章主要介绍了Angular 5.x 学习笔记之Router(路由)应用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-04-04
Angular中使用响应式表单的详细步骤
Angular提供了两种处理表单的方式模板驱动表单和响应式表单（也称为模型驱动表单）,使用模板驱动表单时,模板指令被用来构建表单的内部表示,在本文中,您探讨了如何将响应式表单应用于一个示例 Angular 应用程序
2024-02-02
Angular中ng-bind和ng-model的区别实例详解
这篇文章主要介绍了Angular中ng-bind和ng-model的区别实例详解的相关资料,需要的朋友可以参考下
2017-04-04
Angular2 组件交互实例详解
Angular2应用程序实际上是有很多父子组价组成的组件树，因此，了解组件之间如何通信，特别是父子组件之间，对编写Angular2应用程序具有十分重要的意义。下面通过本文给大家介绍Angular2 组件交互知识，感兴趣的朋友一起看看吧
2017-08-08
详解AngularJS controller调用factory
本篇文章主要介绍了详解AngularJS controller调用factory，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05
protractor的安装与基本使用教程
这篇文章主要给大家介绍了关于protractor安装与基本使用的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-07-07
AngularJS实现表单手动验证和表单自动验证
本文是对AngularJS表单验证，手动验证或自动验证的讲解，对学习JavaScript编程技术有所帮助，感兴趣的小伙伴们可以参考一下
2015-12-12
AngularJS实现的base64编码与解码功能示例
这篇文章主要介绍了AngularJS实现的base64编码与解码功能,结合实例形式分析了AngularJS字符串base64编码与解码操作相关实现技巧,需要的朋友可以参考下
2018-05-05