首页 / ANGULAR / Angular4中常用管道实例详解

Angular4中常用管道实例详解

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Angular4中常用管道实例详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1290字，纯文字阅读大概需要2分钟。

内容图文

通常我们需要使用管道实现对数据的格式化，Angular4中的管道和之前有了一些变化。本文主要介绍Angular4中常用管道，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

一、大小写转换管道

uppercase将字符串转换为大写
lowercase将字符串转换为小写

<p>将字符串转换为大写{{str | uppercase}}</p>

页面上会显示

将字符串转换为大写HELLO

二、日期管道

date。日期管道符可以接受参数，用来规定输出日期的格式。

<p>现在的时间是{{today | date:'yyyy-MM-dd HH:mm:ss'}}</p>

页面上会显示现在的时间是2017年05月08日10时57分53秒

三、小数管道

number管道用来将数字处理为我们需要的小数格式

接收的参数格式为{最少整数位数}.{最少小数位数}-{最多小数位数}

其中最少整数位数默认为1

最少小数位数默认为0

最多小数位数默认为3

当小数位数少于规定的{最少小数位数}时，会自动补0

当小数位数多于规定的{最多小数位数}时，会四舍五入

<p>圆周率是{{pi | number:'2.2-4'}}</p>

页面上会显示

圆周率是03.1416

四、货币管道

currency管道用来将数字转换为货币格式

<p>{{a | currency:'USD':false}}</p>
<p>{{b | currency:'USD':true:'4.2-2'}}</p>

页面上将显示

USD8.25

0156.55这里的′USD′是美元UnitedStatesdollar的缩写，当为false时不显示符，当为true时，则显示$符。后面的规定小数位数的参数和上面介绍的一样。

内容总结

以上是互联网集市为您收集整理的Angular4中常用管道实例详解全部内容，希望文章能够帮你解决Angular4中常用管道实例详解所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/295416.html

来源：【匿名】

【上一篇】AngularJS仿微信图片手势缩放代码【下一篇】使用AngularJS和PHP的Laravel实现单页评论的方法

更多 ►

【Angular4中常用管道实例详解】教程文章相关的互联网学习教程文章

实例详解Angular实现点击按钮后在上方显示输入内容【图】

本文主要介绍了Angular实现点击按钮后在上方显示输入内容的方法,涉及AngularJS事件响应及页面元素属性动态设置相关操作技巧,需要的朋友可以参考下，希望能帮助到大家。先来看看运行效果：具体代码如下：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>www.gxlcms.com Angular显示输入内容</title> <script src="angular.min.js"></script> <script> var myapp=angular.module("myapp",[]); myapp.provider("User"...

实例详解Angular实现简单查询天气预报功能【图】

本文主要介绍了Angular实现的简单查询天气预报功能,涉及AngularJS针对第三方API接口交互的相关操作技巧,需要的朋友可以参考下，希望能帮助帮到大家。本文实例讲述了Angular实现的简单查询天气预报功能。分享给大家供大家参考，具体如下：先来看看运行效果：具体代码如下：<!DOCTYPE html> <html> <head><meta charset="utf-8"><script src="angular.min.js"></script> </head> <body ng-app="myApp" ng-controller="siteCtrl"> <p ...

AngularjsPromise实例详解【图】

Promise是一个构造函数，自己身上有all、reject、resolve这几个异步方式处理值的方法，原型上有then、catch等同样很眼熟的方法，下面通过实例代码给大家讲解angularjs promise 的相关知识，感兴趣的朋友一起看看吧一、什么是PromisePromise是对象，代表了一个函数最终可能的返回值或抛出的异常，就是用来异步处理值的。Promise是一个构造函数，自己身上有all、reject、resolve这几个异步方式处理值的方法，原型上有then、catch等同...

实例详解AngularJs分页显示数据

在做项目的时候我们经常会用到分页显示数据，其实原理很简单：就是每次点击（下/上）一页的时候向后台发送请求获取相关JSON数据，我这里演示的是我每次请求都会传给后台两个参数（pageSize–每页要展示的数据、pageNo–当前页码）HTML相关代码：<p id=demo ng-app=myApp ng-controller=myCtrl><table><thead><th>序号</th><th>操作人</th><th>类别</th><th>电话</th><th>金额</th><th>操作时间</th></thead><tbody><tr ng-repeat=...

Angular4中常用管道实例详解

通常我们需要使用管道实现对数据的格式化，Angular4中的管道和之前有了一些变化。本文主要介绍Angular4中常用管道，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。一、大小写转换管道uppercase将字符串转换为大写lowercase将字符串转换为小写<p>将字符串转换为大写{{str | uppercase}}</p>页面上会显示将字符串转换为大写HELLO二、日期管道date。日期管道符可以接受参数，用来...

Angular2模块懒加载实例详解【图】

本文主要介绍了浅谈Angular2 模块懒加载的方法，小编觉得挺不错的，现在分享给大家，希望能帮助到大家。当项目变得复杂庞大以后，如果所有页面都在一个模块里，就会出现首页加载慢的问题，因为首页就已经把整个项目加载进来了。所以，很有必要根据业务将不同的功能分模块，以便Angular2按需加载,提升用户体验。下面的例子是将首页放到home模块里，访问/home时加载home模块内容，仅供学习懒加载，其实首页访问路径应该是/先看项目文...

angular2路由预加载实例详解【图】

本文主要介绍了浅谈angular2路由预加载策略，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。1.问题描述在没有使路由懒加载的时候，第一次使用的时候加载特别慢，影响用户体验，angular2可以使用loadChildren进行懒加载，第一次使用的时候只会加载需要的模块，其它模块在真正使用的时候才会去加载，这个时候打开浏览器控制台查看js加载的时候，会发现你在使用时候会去加载对应的...

使用路由延迟加载Angular模块实例详解【图】

本文主要介绍了详解使用路由延迟加载 Angular 模块,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。Angular 非常模块化，模块化的一个非常有用的特性就是模块作为延迟加载点。延迟加载意味着可以在后台加载一个模块和其包含的所有组件等资源。这样 Angular 就不需要在第一个界面从服务器下载所有的文件，直到您请求它，才下载相应的模块。这对提供性能和减少首屏的初始下载文件尺...

Angular2整合其他插件的方法实例详解【图】

现在有很多朋友在接触Angular2的时候，总是不可避免的会使用一些其他的第3方的插件，而这些插件可能都是基于jQuery的，而且也没有对应的angular2的版本，这里我就来讲解一下，在这种情况下，如何整合第3方的jQuery插件。我们以Angular2整合zTree为例来说明整合的思路及过程。本文主要和大家详细分析了Angular2整合其他插件的方法，有兴趣的朋友学习下。zTree官方网站：http://www.treejs.cn/v3/main.php#_zTreeInfo1.一般我在想要将...

AngularJS控制器controller实例详解

本文主要介绍了AngularJS 控制器 controller的详解的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下，希望能帮助到大家。AngularJS 控制器 controller的详解一、控制器概念控制器在Angualrjs 中的作用是增强视图，并且是一个函数，用来向视图的作用域中添加额外的功能。我们用它来给作用域对象设置初始状态，并添加自定义行为。当我们在页面上创建一个新的控制器是，angularjs会生成并传递一个新的$sco...

实例详解基于angular-utils-ui-breadcrumbs使用心得【图】

angular-utils-ui-breadcrumbs是一个用来自动生成面包屑导航栏的一个插件，需要依赖angular、UIRouter和bootstrap3.css。生成的界面截图如下，点击相应的面包屑会跳转到相应的路由，点击相应的路由也会自动生成相应的面包屑：本文主要为大家带来一篇基于angular-utils-ui-breadcrumbs使用心得(分享)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。安装：npm install angular...

实例详解Angular实现类似博客评论的递归显示及获取回复评论的数据【图】

本文主要给大家介绍了关于Angular如何实现类似博客评论的递归显示及获取回复评论的数据的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。前言我们在一些技术博客中会经常看到很多递归评论，也即是我们可以回复博友的评论，且界面很美观，有梯度的显示格式，日前在空余时间写类似的 demo，所以记录下来，可以给需要的人一些借鉴的作用。好了，...

实例详解Angular实现较为复杂的表格过滤和删除功能【图】

本文主要介绍了Angular实现较为复杂的表格过滤，删除功能,结合实例形式分析了AngularJS针对表格的排序、查询匹配、页面元素属性动态修改等相关操作技巧,需要的朋友可以参考下没希望能帮助到大家。本文实例讲述了Angular实现较为复杂的表格过滤，删除功能。分享给大家供大家参考，具体如下：先来看看运行效果：具体代码如下：<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>www.gxlcms.com Angular过滤、删除</title>...

实例详解AngularJS遍历获取数组元素【图】

本文主要介绍了AngularJS遍历获取数组元素的方法,涉及AngularJS简单的数组遍历及元素获取相关操作技巧,需要的朋友可以参考下，希望能帮助到大家。<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>获取数组的元素例子</title><script src="angular.min.js"></script><script>var app=angular.module("lesson",[]);app.controller("oneCtrl",function($scope){});</script> </head> <body ng-app="lesson" ng-...

如何使用AngularJS进行身份验证的代码实例详解

身份认证最普遍的身份认证方式就是用用户名（或 email）和密码做登陆操作。这就意味要实现一个登陆的表单，以便用户能够用他们个人信息登陆。这个表单看起来是这样的：<form name="loginForm" ng-controller="LoginController"ng-submit="login(credentials)" novalidate><label for="username">Username:</label><input type="text" id="username"ng-model="credentials.username"><label for="password">Password:</label><input...

首页 / ANGULAR / Angular4中常用管道实例详解

Angular4中常用管道实例详解

内容导读

内容图文

内容总结

内容备注

内容手机端

【Angular4中常用管道实例详解】教程文章相关的互联网学习教程文章

实例 - 相关标签

ANGULAR - 技术教程分类

ANGULAR - 最新教程

ANGULAR - 最热教程