热门标签 | 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}}

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










推荐阅读
  • MySQL初级篇——字符串、日期时间、流程控制函数的相关应用
    文章目录:1.字符串函数2.日期时间函数2.1获取日期时间2.2日期与时间戳的转换2.3获取年月日、时分秒、星期数、天数等函数2.4时间和秒钟的转换2. ... [详细]
  • 网站访问全流程解析
    本文详细介绍了从用户在浏览器中输入一个域名(如www.yy.com)到页面完全展示的整个过程,包括DNS解析、TCP连接、请求响应等多个步骤。 ... [详细]
  • Ext JS MVC系列一:环境搭建与框架概览
    本文主要介绍了如何在项目中使用Ext JS 4作为前端框架,并详细讲解了Ext JS 4的MVC开发模式。文章将从项目目录结构、相关CSS和JS文件的引用以及MVC框架的整体认识三个方面进行总结。 ... [详细]
  • 利用REM实现移动端布局的高效适配技巧
    在移动设备上实现高效布局适配时,使用rem单位已成为一种流行且有效的技术。本文将分享过去一年中使用rem进行布局适配的经验和心得。rem作为一种相对单位,能够根据根元素的字体大小动态调整,从而确保不同屏幕尺寸下的布局一致性。通过合理设置根元素的字体大小,开发者可以轻松实现响应式设计,提高用户体验。此外,文章还将探讨一些常见的问题和解决方案,帮助开发者更好地掌握这一技术。 ... [详细]
  • 本文介绍了如何使用 Node.js 和 Express(4.x 及以上版本)构建高效的文件上传功能。通过引入 `multer` 中间件,可以轻松实现文件上传。首先,需要通过 `npm install multer` 安装该中间件。接着,在 Express 应用中配置 `multer`,以处理多部分表单数据。本文详细讲解了 `multer` 的基本用法和高级配置,帮助开发者快速搭建稳定可靠的文件上传服务。 ... [详细]
  • malloc 是 C 语言中的一个标准库函数,全称为 memory allocation,即动态内存分配。它用于在程序运行时申请一块指定大小的连续内存区域,并返回该区域的起始地址。当无法预先确定内存的具体位置时,可以通过 malloc 动态分配内存。 ... [详细]
  • Python多线程详解与示例
    本文介绍了Python中的多线程编程,包括僵尸进程和孤儿进程的概念,并提供了具体的代码示例。同时,详细解释了0号进程和1号进程在系统中的作用。 ... [详细]
  • 一个建表一个执行crud操作建表代码importandroid.content.Context;importandroid.database.sqlite.SQLiteDat ... [详细]
  • importpymysql#一、直接连接mysql数据库'''coonpymysql.connect(host'192.168.*.*',u ... [详细]
  • 微软推出Windows Terminal Preview v0.10
    微软近期发布了Windows Terminal Preview v0.10,用户可以在微软商店或GitHub上获取这一更新。该版本在2月份发布的v0.9基础上,新增了鼠标输入和复制Pane等功能。 ... [详细]
  • 本教程详细介绍了如何使用 Spring Boot 创建一个简单的 Hello World 应用程序。适合初学者快速上手。 ... [详细]
  • javascript分页类支持页码格式
    前端时间因为项目需要,要对一个产品下所有的附属图片进行分页显示,没考虑ajax一张张请求,所以干脆一次性全部把图片out,然 ... [详细]
  • php更新数据库字段的函数是,php更新数据库字段的函数是 ... [详细]
  • 本地存储组件实现对IE低版本浏览器的兼容性支持 ... [详细]
  • 如何在PHP中获取数组中特定元素的索引位置
    在PHP中获取数组中特定元素的索引位置有多种方法。首先,可以使用 `array_search()` 函数,其语法为 `array_search(目标值, $array)`,该函数将返回匹配元素的第一个键名(即下标)。其次,也可以利用 `array_keys()` 函数,通过 `array_keys($array, 目标值)` 语法来获取所有匹配元素的键名列表。这两种方法都能有效解决数组元素定位的问题,具体选择取决于实际需求和性能考虑。 ... [详细]
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社区 版权所有