Angularjs过滤器使用详解
更新时间：2016年05月25日 10:22:37 作者：天道酬勤
AngularJS提供了过滤器来对输入输出数据格式化。这篇文章主要介绍了Angularjs过滤器使用的相关资料,需要的朋友可以参考下
给大家介绍下什么是 AngularJS?
AngularJS是一个为动态WEB应用设计的结构框架。它能让你使用HTML作为模板语言，通过扩展HTML的语法，让你能更清楚、简洁地构建你的应用组件。它的创新点在于，利用数据绑定和依赖注入，它使你不用再写大量的代码了。这些全都是通过浏览器端的Javascript实现，这也使得它能够完美地和任何服务器端技术结合。
AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。所以我做了一些工作（你也可以觉得是小花招）来让浏览器做我想要的事。
AngularJS提供了过滤器来对输入输出数据格式化。下面开始给大家介绍Angularjs过滤器使用，一起看看吧
•在html文件中和在js文件中使用
$scope.form_time = $filter('date')($scope.time, 'yyyy-MM-dd HH:mm:ss');
<p>{{time | date: 'yyyy-MM-dd HH:mm:ss'}}</p>
•内部过滤器和自定义过滤器
.filter('my_data_format',[function(){
return function(data,str,sss){
console.log('data: ',data,' str: ',str,' sss: ',arguments[2]);
}
}]);
//var1就是第一个参数data， 123是第二个参数str， this是第三个参数
<p>{{var1 | my_data_format : 123 : 'this'}}</p>
//对传入的数据进行处理
.filter('my_data_format',[function(){
return function(data,str){
var arr=[];
angular.forEach(data, function(one_list){
if(one_list.status == str){
arr.push(one_list);
}
});
return arr;
}
}]);
//过滤器可以用在绑定的值中,也可以用在ng-if="(lists | my_data_format: '2').length>0", 和ng-show等；类似的表达式中。作为判断语句
<p ng-repeat = "list in lists">姓名:{{list.name}},人数{{(lists | my_data_format: '2').length}}</p>
相关文章
本篇文章主要介绍了详解如何在Angular中快速定位DOM元素，非常具有实用价值，需要的朋友可以参考下2017-05-05
本篇文章主要介绍了Angular2 组件通信的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
本篇文章主要介绍了详解AngularJS2 Http服务，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要介绍了angular.bind使用心得，以及个人对于angular.bind的理解，这里分享给大家，希望大家能够喜欢。2015-10-10
这篇文章主要介绍了AngularJS中的DOM操作,较为详细的分析了AngularJS针对DOM操作的原理、实现技巧与相关注意事项,需要的朋友可以参考下2016-11-11
这篇文章主要介绍了Angular2 路由问题修复详解的相关资料,并建了一个测试工程，把详细的过程分享给大家，需要的朋友可以参考下2017-03-03
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
今天用angular写table的时候，遇到了一个问题。在ng-repeat中，含有动态的html，而这些html中含有自定义指令，怎么实现呢？下面小编给大家分享AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法，一起看看吧2017-01-01
这篇文章主要介绍了浅谈Angular单元测试总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
这篇文章主要介绍了Angular学习笔记之集成三方UI框架、控件的示例，详细的介绍了Material UI、Ag-grid等框架，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-03-03
这篇文章主要介绍了AngularJS自定义控件,结合实例形式详细分析了AngularJS自定义指令与模板操作的相关函数与使用技巧,需要的朋友可以参考下2016-12-12
最新评论