欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Angularjs过滤器使用详解

程序员文章站 2022-04-28 09:02:31
给大家介绍下什么是 angularjs? angularjs是一个为动态web应用设计的结构框架。它能让你使用html作为模板语言,通过扩展html的语法,让你...

给大家介绍下什么是 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>