AngularJS实现进度条功能示例

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

一、功能描述：

① 通过select标签，可以为进度条选择不同的样式（颜色）

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

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

二、代码实现：

  
  
  
  
    .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;
    }
  


  
    
      {{vm.progress}}%
    
  
  

  
    颜色：
    
      red
      green
      blue
    
  
  


  进度：
    
    0%
    20%
    40%
    60%
    80%
  
  


  
    是否显示文字：
    
  
  

demo预览：

三、知识点分析

1、ng-class

ngclass实现有以下三种方式：

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

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

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

  {{vm.progress}}%

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

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

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

2、ng-style

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

  {{vm.progress}}%

3、ng-if

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

{{vm.progress}}%

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

4、ng-model

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

  red
  green
  blue

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

说明：在checkbox中，ng-model的值为true或者false

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

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