• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >AngularJS > Angularjs过滤器使用详解

Angularjs过滤器使用详解

作者:天道酬勤 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含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> 
</div>

•内部过滤器和自定义过滤器

.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>
</div>

</div>

您可能想查找下面的文章:

相关文章

  • 2017-05-30AngularJS基础 ng-keyup 指令简单示例
  • 2017-05-30Angularjs中使用Filters详解
  • 2017-05-30AngularJS模块学习之Anchor Scroll
  • 2017-05-30AngularJS 视图详解及示例代码
  • 2017-05-30AngularJS通过$sce输出html的方法
  • 2017-05-30深入探究AngularJS框架中Scope对象的超级教程
  • 2017-05-30AngularJS HTML DOM详解及示例代码
  • 2017-05-30AngularJS教程 ng-style 指令简单示例
  • 2017-09-11ionic AngularJS 生成二维码 扫描识别二维码
  • 2017-09-10Angular2开发中的小问题

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • AngularJS用户选择器指令实例分析
    • AngularJS封装$http.post()实例详解
    • 浅谈Angularjs link和compile的使用区别
    • AngularJS入门教程之控制器详解
    • 简介AngularJS中使用factory和service的方法
    • AngularJS定时器的使用与移除操作方法【interval与timeout】
    • AngularJS变量及过滤器Filter用法分析
    • AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
    • 基于angular实现三级联动的生日插件
    • angularjs的select使用及默认选中设置

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有