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程序设计有所帮助。
相关文章
我们可以使用内置的$http服务直接同外部进行通信。$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象。接下来通过本文给大家简单介绍angularjs中http服务的用法，喜欢的朋友可以参考下2016-02-02
本文给大家总结了一下在angular中给ng-repeat列表加上动画效果时所遇到的问题及解决方法，推荐给大家，希望大家能够喜欢。2016-02-02
AngularJS基础 ng-mouseenter 指令示例代码
本文主要介绍AngularJS ng-mouseenter 指令,这里对ng-mouseenter 指令基础资料做了详细整理,并附代码实例,有需要的小伙伴可以参考下2016-08-08
这篇文章主要介绍了Angularjs制作简单的路由功能demo，刚刚开始学习Angularjs,做的不好，还请见谅。2015-04-04
这篇文章主要介绍了AngularJS表单提交的方法,结合完整实例形式分析了AngularJS表单提交过程中的数据绑定、模块、控制器等相关操作技巧,需要的朋友可以参考下2017-02-02
这篇文章主要为大家介绍了angular中radio单选的问题解决demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要为大家详细介绍了AngularJS实现注册表单验证功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
指令（Directives）是所有AngularJS应用最重要的部分。尽管AngularJS已经提供了非常丰富的指令，但还是经常需要创建应用特定的指令2016-03-03
本篇文章主要介绍了angular2系列之路由转场动画的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了AngularJS入门教程（二）：AngularJS模板,本文是系列文章的第三篇,本系列会用一个项目来讲解AngularJS的使用,需要的朋友可以参考下2014-12-12
最新评论