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’); {{time | date: ‘yyyy-MM-dd HH:mm:ss’}} •内部过滤器和自定义过滤器 .filter(‘my_data_format’,[function(){ return function(data,str,sss){ console.log(‘data: ‘,data,’ str: ‘,str,’ sss: ‘,arguments[2]); } }]); //var1就是第一个参数data, 123是第二个参数str, this是第三个参数 {{var1 | my_data_format : 123 : ‘this’}} //对传入的数据进行处理 .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等;类似的表达式中。作为判断语句 姓名:{{list.name}},人数{{(lists | my_data_format: ‘2’).length}} 您可能感兴趣的文章: 详解AngularJS中的filter过滤器用法 AngularJS中的过滤器filter用法完全解析 详解AngularJS中自定义过滤器 AngularJS中的过滤器使用详解 详解AngularJS过滤器的使用 实例解析angularjs的filter过滤器 AngularJS基础知识笔记之过滤器 Angularjs之filter过滤器(推荐) AngularJS过滤器filter用法实例分析 AngularJS 霸道的过滤器小结 angularjs 过滤器 相关文章 Angularjs使用过滤器完成排序功能 这篇文章主要为大家详细介绍了Angularjs使用过滤器完成排序功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-09-09 ionic使用angularjs表单验证(模板验证) 能够验证用户在表单中输入的内容是否合理与正确是十分重要的,这篇文章主要介绍了ionic使用angularjs表单验证(模板验证),具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2018-12-12 Angualrjs和bootstrap相结合实现数据表格table 这篇文章主要介绍了Angualrjs和bootstrap相结合实现数据表格table,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下 2017-03-03 AngularJs Managing Service Dependencies详解 本站主要介绍AngularJs Managing Service Dependencies的知识资料,这里整理相关知识,及简单示例代码,有兴趣的小伙伴可以参考下 2016-09-09 AngularJS开发教程之控制器之间的通信方法分析 这篇文章主要介绍了AngularJS开发教程之控制器之间的通信方法,结合实例形式较为详细的分析了AngularJS控制器之间通信的三种常用方式及相关使用技巧,需要的朋友可以参考下 2016-12-12 详解Ubuntu安装angular-cli遇到的坑 这篇文章主要介绍了详解Ubuntu安装angular-cli遇到的坑,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-09-09 AngularJS入门教程中SQL实例详解 本文主要介绍 AngularJS SQL,这里给大家整理了相关资料,并提供了实例代码,有需要的小伙伴可以参考下 2016-07-07 Angular 向组件传递模板的两种方法 这篇文章主要介绍了Angular 向组件传递模板的两种方法,第一种方式第二种方式是NgTemplateOutlet 指令及各种使用方式介绍,需要的朋友可以参考下 2018-02-02 angular2+nodejs实现图片上传功能 这篇文章主要介绍了angular2+nodejs实现图片上传功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-03-03 浅谈Angular路由复用策略 本篇文章主要介绍了浅谈Angular路由复用策略,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-10-10 最新评论

给大家介绍下什么是 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>
您可能感兴趣的文章:

  • 详解AngularJS中的filter过滤器用法
  • AngularJS中的过滤器filter用法完全解析
  • 详解AngularJS中自定义过滤器
  • AngularJS中的过滤器使用详解
  • 详解AngularJS过滤器的使用
  • 实例解析angularjs的filter过滤器
  • AngularJS基础知识笔记之过滤器
  • Angularjs之filter过滤器(推荐)
  • AngularJS过滤器filter用法实例分析
  • AngularJS 霸道的过滤器小结
张贴在3