热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

angularJS过滤器

{{name}}

angularJS首先我们要对angularJS有一定简单的了解的过滤器angularJS过滤器(大标题小标题)|:管道符号,用来分割数据
angularJS

      首先我们要对angularJS有一定简单的了解的过滤器

angularJS过滤器(大标题小标题

        |:管道符号,用来分割数据和过滤器 currency:货币金额的操作
      代码示例: (此次展现了所有代码,下次将只展现核心代码)










{{price|currency}}




页面结果展示:
可通过currency中增加参数的方法来改变货币的单位(类似与传参根据参数的不同,可进行多参传递currecy:"一参":"二参":"三参")

代码示例:

{{price|currency:"¥"}}

页面展示结果示例:

number:将数字转换为文本的格式

代码示例:

{{price|number}}

页面展示结果示例:(只有分隔符,没有小数点以及货币符号)

当数字有小数点时(数字为6215387216.7253726)会自动截取小数点前三位(也可通过传参的方式对小数点的截取个数进行传参)number:参数0-n

页面展示结果示例:

代码示例:(截取两位)

{{price|number:2}}

页面展示结果示例:

lowercase/uppercase:转换大小写

json:可对json格式进行调试(注意:要使用在
标签中因为该标签可以识别空格和转行) 
 

代码示例:

{{json|json}}

  
页面展示结果示例:
limitTo:截取的操作,针对数组,字符串也可以

代码示例:
$scope.con=['a','b','c','d'];

{{con|limitTo:2}}

页面展示结果示例:

date:日期格式化,输入毫秒数然后进行计算输出日期(可在冒号后进行传参用来规定日期的格式可在官网上详细查询参数的类型)
代码示例:
$scope.con='32784674682149';

{{con|date}}

页面展示结果示例:

代码示例:(有参数)

{{con|dat e:'yyyy' }}

页面展示结果示例:
orderBy:排序针对数据针对value
代码示例:(如果是字符串排序则是按照字符的顺利,数字则是大小)
$scope.con=[{"color":"red","age":"20"},
{"color":"blue","age":"30"},
{"color":"yellow","age":"40"},
{"color":"white","age":"10"}];
}]);

{{con|orderBy:'color'}}

页面展示结果示例:

代码示例:(有第二个参数:如果是true,则是从大排到小;如果是false,则是从小排到到)

{{con|orderBy:'color':true}}

页面展示结果示例:

filter:过滤针对数据当中的value值对key值无用。也可匹配vaule当中包含的值,当第二个参数为true时是全局匹配

代码示例:

{{con|filter:'20'}}

页面展示结果示例:



过滤器扩展

  • 可组合使用过滤器
  • JS中使用过滤器    
— $scope/$rootScope/$timeout

—$filter(使用依赖注入的方法注入)
代码示例:(使用大写转换器转换示例)

m.controller('Aaa',['$scope','$filter',function($scope,$filter){
$scope.name = $filter('uppercase')('hello');
}]);

{{name}}

页面展示结果示例:
代码示例:(使用数字转换器并进行传参)

$scope.name = $filter('number')('42738148.3678213',1);
页面展示结果示例:
  • 自定义过滤器   
—angular.module

 >>controller/run (可以不适用控制器controller)
代码示例:
var m=angular.module('myApp',[]);
m.run(['$rootScope',function($rootScope) {
$rootScope.name = 'hello';
}]);

{{name}}



页面展示结果示例:
>>filter(在JS中也可以使用)
代码示例:(将字符串的首字符转换为大写)

var m=angular.module('myApp',[]);
m.filter('firstUpper',function(){
return function(str){//在此函数进行传参(str,参数)
return str.charAt(0).toUpperCase()+str.substring(1);
}
});
m.controller('Aaa',['$scope','$filter',function($scope,$filter){
$scope.name = 'hello';
}]);

{{name|firstUpper}}

//若传参
页面展示结果示例:










推荐阅读
  • 本文讨论了在手机移动端如何使用HTML5和JavaScript实现视频上传并压缩视频质量,或者降低手机摄像头拍摄质量的问题。作者指出HTML5和JavaScript无法直接压缩视频,只能通过将视频传送到服务器端由后端进行压缩。对于控制相机拍摄质量,只有使用JAVA编写Android客户端才能实现压缩。此外,作者还解释了在交作业时使用zip格式压缩包导致CSS文件和图片音乐丢失的原因,并提供了解决方法。最后,作者还介绍了一个用于处理图片的类,可以实现图片剪裁处理和生成缩略图的功能。 ... [详细]
  • Html5-Canvas实现简易的抽奖转盘效果
    本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果,同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码,并展示了实现的基本效果。 ... [详细]
  • 本文讨论了编写可保护的代码的重要性,包括提高代码的可读性、可调试性和直观性。同时介绍了优化代码的方法,如代码格式化、解释函数和提炼函数等。还提到了一些常见的坏代码味道,如不规范的命名、重复代码、过长的函数和参数列表等。最后,介绍了如何处理数据泥团和进行函数重构,以提高代码质量和可维护性。 ... [详细]
  • 本文介绍了Oracle存储过程的基本语法和写法示例,同时还介绍了已命名的系统异常的产生原因。 ... [详细]
  • 本文是一篇翻译文章,介绍了async/await的用法和特点。async关键字被放置在函数前面,意味着该函数总是返回一个promise。文章还提到了可以显式返回一个promise的方法。该特性使得async/await更易于理解和使用。本文还提到了一些可能的错误,并希望读者能够指正。 ... [详细]
  • 【爬虫】关于企业信用信息公示系统加速乐最新反爬虫机制
    ( ̄▽ ̄)~又得半夜修仙了,作为一个爬虫小白,花了3天时间写好的程序,才跑了一个月目标网站就更新了,是有点悲催,还是要只有一天的时间重构。升级后网站的层次结构并没有太多变化,表面上 ... [详细]
  • 本文介绍了使用Java实现大数乘法的分治算法,包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]
  • C语言注释工具及快捷键,删除C语言注释工具的实现思路
    本文介绍了C语言中注释的两种方式以及注释的作用,提供了删除C语言注释的工具实现思路,并分享了C语言中注释的快捷键操作方法。 ... [详细]
  • 本文介绍了如何在给定的有序字符序列中插入新字符,并保持序列的有序性。通过示例代码演示了插入过程,以及插入后的字符序列。 ... [详细]
  • 计算机存储系统的层次结构及其优势
    本文介绍了计算机存储系统的层次结构,包括高速缓存、主存储器和辅助存储器三个层次。通过分层存储数据可以提高程序的执行效率。计算机存储系统的层次结构将各种不同存储容量、存取速度和价格的存储器有机组合成整体,形成可寻址存储空间比主存储器空间大得多的存储整体。由于辅助存储器容量大、价格低,使得整体存储系统的平均价格降低。同时,高速缓存的存取速度可以和CPU的工作速度相匹配,进一步提高程序执行效率。 ... [详细]
  • Python正则表达式学习记录及常用方法
    本文记录了学习Python正则表达式的过程,介绍了re模块的常用方法re.search,并解释了rawstring的作用。正则表达式是一种方便检查字符串匹配模式的工具,通过本文的学习可以掌握Python中使用正则表达式的基本方法。 ... [详细]
  • 深入解析Linux下的I/O多路转接epoll技术
    本文深入解析了Linux下的I/O多路转接epoll技术,介绍了select和poll函数的问题,以及epoll函数的设计和优点。同时讲解了epoll函数的使用方法,包括epoll_create和epoll_ctl两个系统调用。 ... [详细]
  • 本文介绍了2015年九月八日的js学习总结及相关知识点,包括参考书《javaScript Dom编程的艺术》、js简史、Dom、DHTML、解释型程序设计和编译型程序设计等内容。同时还提到了最佳实践是将标签放到HTML文档的最后,并且对语句和注释的使用进行了说明。 ... [详细]
  • 前段时间做一个项目,需求是对每个视频添加预览图,这个问题最终选择方案是:用canvas.toDataYRL();来做转换获取视频的一个截图,添加到页面中,达到自动添加预览图的目的。 ... [详细]
  • Python中的PyInputPlus模块原文:https ... [详细]
author-avatar
840126054贝尔
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有