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

一、功能描述：

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

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

通过检验盒按钮，控制进度条上的文字是否显示

二、代码实现：

！DOCTYPE html html lang=' en ' ng-app=' app ' head meta charset=' UTF-8 ' title进度条/title脚本' src='./js/angular。量滴js /脚本样式。进度{ width:400pxborder:1px固体# ccc高度： 28px文本对齐：中心；线高： 28px字体粗细：粗体；color: # fff飞越：隐藏；} .条形{宽度：50%;高度： 28px背景# 5BC0DE}。蓝色{ background: # 5BC0DE}。红色{ background: # D9534F}。绿色{ background:绿色；}/style/head body ng-controller=' progress control ' div class=' progress ' div ng-class='[' Bar '，VM。style]' ng-style=' { width : VM。进度“% }”div ng-if=“VM。文本“{ VM。进度} } %/div/div/br标签颜色：选择ng-model='vm.style '选项值='红色'红色/选项选项值='绿色'绿色/选项选项值='蓝色'蓝色/选项/选择/标签/br/标签进度：输入类型=' number ' ng-model=' VM。进度' ng-change=' VM。myfunc()'按钮ng-click=' VM。进度=0 ' 0%/按钮ng-click=' VM。进度=20 ' 20%/按钮ng-click=' VM。进度=40 ' 40%/按钮ng-click=' VM。进度=60 ' 60%/按钮ng-click=' VM。进度=80 ' 80%/按钮/标签/br/标签是否显示文字：输入类型='复选框' ng-型号=' VM。文本'/标签脚本var app=angular。模块(' app '，[])；app.controller('progresscontro '，function($ scope){ var VM=$ scope。VM={ }；VM . style=' blue VM . progress=50vm . text=Truevm。my func=function(){ if(VM。进度100){ VM。进度=100；} if(VM。进度0){ VM。进度=0；} } })/脚本/正文/htmldemo预览：

三、知识点分析

1、ng级

ngclass实现有以下三种方式：

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

' div ng-class='红色/div说明：字符串形式，每次只能绑定一个类名

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

div ng-class='['Bar '，VM。style]' ng-style=' { width : VM。进度“% }”div ng-if=“VM。文本“{ VM。进度} } %/div/div说明：数组中可以存放一个变量，但是字符串形式只能存放常量

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

div ng-class { ' selected ' :被选中，' car': isCar} '说明：当isSelected=true则增加所选类别，当isCar=真，则增加汽车等级，

2、天然气型

尼日利亚型的属性值是一个对象，对象里的内容是以键值的形式展现，键是属性，值是值，如下：

div ng-class='['Bar '，VM。style]' ng-style=' { width : VM。进度“% }”div ng-if=“VM。文本“{ VM。进度} } %/div/div 3，ng-if

ng-if指令用于在表达式为错误的时，移除指定超文本标记语言元素，当表达式为真实的时，则添加移除的超文本标记语言元素，并显示，如下：

div ng-if=' VM。文本" { VM。进度} } %/div说明：当vm.text为真时显示视图里面的内容，否则移除

4、天然气模型

尼日利亚模型指令绑定了超文本标记语言表单元素到范围变量中，如下：

选择ng-model='vm.style '选项值='红色'红色/选项选项值='绿色'绿色/选项值='蓝色'蓝色/选项/选择说明：在挑选标签中尼日利亚型的值为所选择的选择权的价值值

输入类型='复选框' ng-model=' vm.text '描述：在复选框中，ng-model的值为真或假

更多对AngularJS感兴趣的读者可以查看本网站的主题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》和《AngularJS MVC架构总结》

希望本文对AngularJS编程有所帮助。