AngularJS实现进度条功能示例

前端之家收集整理的这篇文章主要介绍了AngularJS实现进度条功能示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

一、功能描述:

① 通过select标签,可以为进度条选择不同的样式(颜色)

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

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

二、代码实现:

<Meta charset="UTF-8"> 进度条
{{vm.progress}}%





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 变量中,如下:

说明:

在select标签中,ng-model的值为所选择的option的value值

说明:

在checkBox中,ng-model的值为true或者false

更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《》、《》及《

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

进度条

猜你在找的JavaScript相关文章