AngularJS常见过滤器用法实例总结
本文实例讲述了AngularJS常见过滤器用法。分享给大家供大家参考，具体如下：
过滤器用来格式化需要展示给用户的数据。在HTML中的模板绑定符号 {{ }} 内通过 | 符号来调用过滤器。以下是常用的过滤器。
大小写过滤器
{{ name | uppercase }} 大写过滤器
{{ name | lowercase}} 小写过滤器
实例：（大写过滤器）
<div ng-controller='myController'>
姓氏: <input type="text" ng-model="student.firstName"></br></br>
名字: <input type="text" ng-model="student.lastName"></br></br>
名字转大写: {{student.fullName() | uppercase}}
</div>
<script>
var app=angular.module('app',[]);
app.controller('myController',function($scope){
$scope.student={
firstName: "xu",
lastName: "xiaohong",
fullName:function(){
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + studentObject.lastName;
}
};
});
</script>
货币过滤器
currecy 过滤器可以将一个数值格式化为货币格式。用 {{ 123 | currency }} 来将123转化成货币格式。currecy 过滤器允许我们自己设置货币符号。默认情况下会采用客户端所处区域的货币符号，但是也可以自定义货币符号。如下：
<div ng-controller='myController'>
Enter fees: <input type="text" ng-model="student.fees"></br>
fees: {{student.fees | currency:'￥'}}
</div>
<script>
var app=angular.module('app',[]);
app.controller('myController',function($scope){
$scope.student={
fees:500
};
});
</script>
日期过滤器
date 过滤器可以将日期格式化成需要的格式。如下：
<div ng-controller='myController'>
{{data | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}
</div>
<script>
var app=angular.module('app',[]);
app.controller('myController',function($scope){
$scope.data=new Date();
});
</script>
limitTo过滤器
limitTo过滤器用来截取数组或字符串，接收一个参数用来指定截取的长度。实例：
<body ng-controller="test">
{{ childrenArray | limitTo : 2 }}
<script>
var app=angular.module('app',[]);
app.controller('test',function($scope){
$scope.childrenArray = [
{name:'kimi',age:3},
{name:'cindy',age:4},
{name:'anglar',age:4},
{name:'shitou',age:6},
{name:'tiantian',age:5}
];
});
</script>
</body>
orderBy过滤器：
orderBy过滤器可以将一个数组中的元素进行排序，接收一个参数来指定排序规则，参数可以是一个字符串，表示以该属性名称进行排序。可以是一个函数，定义排序属性。还可以是一个数组，表示依次按数组中的属性值进行排序（若按第一项比较的值相等，再按第二项比较），还是拿上面的孩子数组举例：
<div>{{ childrenArray | orderBy : 'age' }}</div> //按age属性值进行排序
<div>{{ childrenArray | orderBy : orderFunc }}</div> //按照函数的返回值进行排序
<div>{{ childrenArray | orderBy : ['age','name'] }}</div> //如果age相同，按照name进行排序
自定义过滤器：
AngularJS编写自定义过滤器的形式和AngularJS的factory service非常相像，一定记得它返回一个对象或者是一个函数即可，编写的时候，只需要一个带有一个以上参数的函数即可。格式大致如下：
app.filter('filter(过滤器)名称',function(){
return function(需要过滤的对象,过滤器参数1,过滤器参数2,...){
//...执行业务逻辑代码
return 处理后的对象;
}
});
实例：（首字母大写）
{{ 'ginger loves dog treats' | capitalize }}
<script>
var app=angular.module('app',[]);
app.filter('capitalize',function(){
return function(input){
if(input){
return input.charAt(0).toUpperCase() + input.slice(1);
}
}
})
</script>
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
相关推荐
-
AngularJS实用基础知识_入门必备篇(推荐)
前言 今天来和大家学习一下AngularJS-- AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序. AngularJS 学习起来非常简单. 一.AngularJS指令与表达式 [AngularJS常用指令] 1.ng-app:声明Angular所管辖的区域,一般写在body或HTML上,原则上一个页面只有一个. 2.ng-model:把元素值(比如输入域的值)绑定到应用程序的变量中. eg:<input type="text&q
-
AngularJS实现select的ng-options功能示例
本文实例讲述了AngularJS实现select的ng-options功能.分享给大家供大家参考,具体如下: controller .controller('MainController', function($scope, $http, $ionicModal, $timeout) { var post = {}; $http.get("data/themeData.json") .success(function(response) { $scope.themeData = res
-
详细AngularJs4的图片剪裁组件的实例
本文介绍了AngularJs4的图片剪裁组件,下面我来记录一下,有需要了解AngularJs4的图片剪裁组件的朋友可参考.希望此文章对各位有所帮助. jQuery里有一个强大的图片剪裁插件,叫cropper.js.这是大神的GitHub地址:https://github.com/fengyuanchen/cropper 首先想在全是ts文件的angular里运用jquery的js代码插件,这时候需要一个东西,他叫桥接文件.npm是一个强大的库,已经有前人在里面封装了cropper以及所有你能想到
-
AngularJS使用ocLazyLoad实现js延迟加载
最近开发一个系统遇到了一个问题,用angular路由一个html片段,该片段需要使用一个js插件来实现一个富文本编辑器.关键问题在于必须要在片段加载后通过js与dom元素进行绑定.一开始想当然以为直接把js代码写在代码段里不久ok了,然而经过实验,路由将html片段插入页面时只能读取css,无法解析并执行js代码. google了半天发现了很多angular+requireJs的解决方案,但我觉得对于我这个场景并不适合,因为requirejs本质是一个模块加载器,按需加载只是他的副业,我们用它应
-
AngularJS中使用three.js的实例详解
AngularJS中使用three.js的实例详解 一.轨迹球的引入问题 一开始我是用下面的方式引如轨迹球,但是会报Trackballcontrols is undefined的错. import * as THREE from 'three'; import * as Trackballcontrols from 'three'; 但其实我是能够在node_module下的threejs的包中找到Trackballcontrols的文件的,我一开始以为是引用的路径没对然后修改路径到对应包下Tr
-
详解使用angularjs的ng-options时如何设置默认值(初始值)
这两天我用ng-options过程中遇到的初始值为空白的问题,记得去年就遇到过,怎么解决的忘记了,费了一阵子功夫之后解决了,想记下来,方便遇到同样问题的小伙伴当然还有自己. 1.场景: 就是做一个查询列表的弹窗,其中有一个条件需要用到下拉菜单,数据是用过ajax传递过去的. 2.实现: a.html: <select ng-model="myselect" ng-options="o for o in options"></select> b
-
详解angularJS自定义指令间的相互交互
AngularJS 自定义指令 transclude:当元素标签需要嵌套时使用,与ng-transclude配合使用.默认值为false不能使用嵌套,true为可以使用嵌套.在哪个标签上使用ng-transclude就在哪个标签内进行嵌套. 代码示例:(将hello.hi标签进行替换同时span标签嵌套div内) <script type="text/javascript"> var m = angular.module('myApp',[]); m.directive('
-
使用AngularJS对表单提交内容进行验证的操作方法
AngularJS是一款优秀的前端JS框架,已经被用于Google的多款产品当中.它有着诸多特性,最为核心的是:MVC.模块化.自动化双向数据绑定.语义化标签.依赖注入等--使用它可以大大减少书写代码的工作量,但和Jquery不同,使用AngularJS有一定的难度,因此今天我将介绍以下怎样使用AngularJS来对表单的提交内容进行验证. AngularJS对表单中常用的验证操作 $dirty 表单有填写记录 $valid 字段内容合法的 $invalid 字段内容是非法的 $pristine
-
AngularJS常见过滤器用法实例总结
本文实例讲述了AngularJS常见过滤器用法.分享给大家供大家参考,具体如下: 过滤器用来格式化需要展示给用户的数据.在HTML中的模板绑定符号 {{ }} 内通过 | 符号来调用过滤器.以下是常用的过滤器. 大小写过滤器 {{ name | uppercase }} 大写过滤器 {{ name | lowercase}} 小写过滤器 实例:(大写过滤器) <div ng-controller='myController'> 姓氏: <input type="text&quo
-
AngularJS自定义过滤器用法经典实例总结
本文实例讲述了AngularJS自定义过滤器用法.分享给大家供大家参考,具体如下: 过滤器结构 {{带过滤数据 | 过滤器名:参数1:参数2:参数3.....}} app.filter('过滤器名', function () { return function (待过滤数据, 参数....) { ...... return 已过滤数据; } 示例一:是否包含 <!doctype html> <html ng-app="myApp"> <head> &
-
Spring Security CsrfFilter过滤器用法实例
这篇文章主要介绍了Spring Security CsrfFilter过滤器用法实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 spring security框架提供的默认登录页面,会有一个name属性值为_csrf的隐藏域: 这是框架在用户访问登录页面之前就生成的,保存在内存中,当用户提交表单的时候会跟着一起提交:_csrf_formdata 然后会经过spring security框架resources目录下配置文件spring-sec
-
AngularJS中ng-class用法实例分析
本文实例讲述了AngularJS中ng-class用法.分享给大家供大家参考,具体如下: 使用 ng-class 动态设置元素的类,方法是绑定一个代表所有需要添加的类的表达式.重复的类不会添加.当表达式发生变化,先前添加的类会被移除,新类会被添加. 在angular中为我们提供了3种方案: ① 通过数据的双向绑定(不推荐使用) ② 通过对象数组. ③ 通过key/value 一.通过数据双向绑定: function changeClass(){ $scope.className = "chang
-
vue过滤器用法实例分析
本文实例讲述了vue过滤器用法.分享给大家供大家参考,具体如下: 过滤器: vue提供过滤器: capitalize uppercase currency.... <div id="box"> {{msg|currency ￥}} </div> debounce 配合事件,延迟执行 <div id="box"> <input type="text" @keyup="show | debounce
-
AngularJS过滤器filter用法实例分析
本文实例讲述了AngularJS过滤器filter用法.分享给大家供大家参考,具体如下: 这节我们来看看angularjs的过滤器filter. 在我们开发中经常需要在页面显示给用户的信息需要一定处理格式化,才能显示给用户.比如时间本地化,或者yyyy-MM-dd HH:mm:ss格式,数字精度格式化,本地化,人名格式化等等.在angularjs中为我们提供了叫filter的指令,让我们能够很轻易就能做到着一些列的功能,angularjs内部为我们提供了number等很多内置的filter.并且
-
AngularJS入门教程之过滤器用法示例
本文实例讲述了AngularJS过滤器用法.分享给大家供大家参考,具体如下: 在前面几节里我们已经接触过AngularJS的表达式,表达式的作用是向视图中输出字面量或$scope对象中的属性值.在输出之前我们可以通过过滤器来格式化输出的数据. 过滤器的使用非常简单,我们看一下下面的代码: <!DOCTYPE html> <html ng-app> <head lang="en"> <meta charset="UTF-8"&
-
VUE中filters过滤器的两种用法实例
目录 前言 一.全局过滤器 全局过滤器之单一挂载 全局过滤器之批量挂载 二.组件过滤器 附:过滤器中传入多个参数 总结 前言 Vue.js 允许我们自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号({undefined{ }})插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示. <!-- 在双花括号中 --> <div>{{ message | capitaliz
-
AngularJS 自定义过滤器详解及实例代码
AngularJS另一个特点就是提供了过滤器,可以通过操作UNIX下管道的方式,操作数据结果. 通过使用管道,可以便于双向的数据绑定中视图的展现. 过滤器在处理过程中,将数据变成新的格式,而且可以使用管道这种链式风格,还能接受附加的参数. 实现方式 下面看一下如何定义声明一个过滤器,首先依然是要创建我们自己的模块myAppModule var myAppModule=agular.module("myApp",[]); 接下来在模块的基础上,创建过滤器: myAppModule.fil
-
YII Framework的filter过滤器用法分析
本文实例讲述了YII Framework的filter过滤器用法.分享给大家供大家参考,具体如下: 首先看官方给出的说明文档,什么是过滤器,过滤器的作用,过滤器的规则,过滤器的定义方法等等. 然后对过滤器进行一个总结. http://www.yiiframework.com/doc/guide/1.1/zh_cn/basics.controller 过滤器是一段代码,可被配置在控制器动作执行之前或之后执行.例如, 访问控制过滤器将被执行以确保在执行请求的动作之前用户已通过身份验证:性能过滤器可用