AngularJS实现进度条功能示例
本文实例讲述了AngularJS实现进度条功能的方法。分享给大家供大家参考,具体如下:
专注于为中小企业提供成都网站设计、网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业延津免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了近1000家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
一、功能描述:
① 通过select标签,可以为进度条选择不同的样式(颜色)
② 进度条的进度通过文本框里面的值改变(也可以快捷的选择几个特定的值)
③ 通过checkbox按钮,控制进度条上的文字是否显示
二、代码实现:
进度条 {{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指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
本文名称:AngularJS实现进度条功能示例
浏览地址:http://pwwzsj.com/article/jipdho.html