详解Angularjs filter过滤器

系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter。如果对smarty比较熟悉的话,学习angularjs会比较容易一点。这篇简单说一下angularjs的filter功能,angularjs的filter功能可分为二种,一种是内置的过滤器,一种是自定义的。

Filter是用来格式化数据用的。

Filter的基本原型( '' 类似于Linux中的管道模式):

{{ expression filter }}

Filter可以被链式使用(即连续使用多个filter):

{{ expression filter1 filter2 ... }}

Filter也可以指定多个参数:

{{ expression filter:argument1:argument2:... }}

一,内置的过滤器

1,uppercase,lowercase大小转换

{{ "lower cap string" | uppercase }} //结果:LOWER CAP STRING
{{ "TANK is GOOD" | lowercase }} //结果:tank is good 

|这里的竖线是一种管道功能,如果对linux比较熟悉的话,这块的|根linux的管道功能,基本是一样的

2,json格式化

{{ {foo: "bar", baz: 23} | json }} //结果:{ "foo": "bar", "baz": 23 } 

注意:bza没格式前是没有双引号的,格式化后就转换成了json数据了。

3,date格式化

{{ 1304375948024 | date }} //结果:May 3, 2011
{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }} //结果:05/03/2011 @ 6:39AM
{{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }} //结果:2011-05-03 06:39:08 

4,number格式化

{{ 1.234567 | number:1 }} //结果:1.2
{{ 1234567 | number }} //结果:1,234,567 

5,currency货币格式化

{{ 250 | currency }} //结果:$250.00
{{ 250 | currency:"RMB ¥ " }} //结果:RMB ¥ 250.00 

6,filter查找

{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:'s'}} //查找含有有s的行
//上例结果:[{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}]
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:{'name':'iphone'} }} //查找name为iphone的行
//上例结果:[{"age":20,"id":10,"name":"iphone"}] 

7,limitTo字符串,对像的截取

{{ "i love tank" | limitTo:6 }} //结果:i love
{{ "i love tank" | limitTo:-4 }} //结果:tank
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | limitTo:1 }} //结果:[{"age":20,"id":10,"name":"iphone"}] 

8,orderBy对像排序

{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id':true }} //根id降序排
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id' }} //根据id升序排 

二,自定filter功能

我找了一个基本angularjs的mvc框架,phonecat,自定义filter也是在这基础写的,这个框架挺好用的。

1,filters.js添加一个module

angular.module('tanktest', []).filter('tankreplace', function() {
return function(input) {
return input.replace(/tank/, "=====")
};
}); 

2,app.js中加载这个module

var phonecatApp = angular.module('phonecatApp', [
'ngRoute',
'phonecatControllers',
'facebookControllers',
'tanktest'
]); 

3,html中调用

{{ "TANK is GOOD" | lowercase |tankreplace}} //结果:===== is good 

注意:| lowercase |tankreplace管道命令可以有多个

以上所述是小编给大家介绍的angularjs filter过滤器相关知识,希望对大家有所帮助,更多有关angularjs filter相关知识敬请关注我们网站。谢谢!

(0)

相关推荐

  • 详解AngularJS Filter(过滤器)用法

    AngularJS的filter,中文名"过滤器"是用来过滤变量的值,或者格式化输出,得到自己所期望的结果或格式的东东. Filter简介 Filter是用来格式化数据用的. Filter的基本原型( '|' 类似于Linux中的管道模式): {{ expression | filter }} Filter可以被链式使用(即连续使用多个filter): {{ expression | filter1 | filter2 | ... }} Filter也可以指定多个参数: {{ expr

  • AngularJS中的过滤器filter用法完全解析

    在AngularJS的世界里,filter提供了一种格式化数据的方法,Angular也提供给我们了很多内建的过滤器,并且建立自定义过滤器也是相当的简单 在HTML的模板绑定{{}}中,我们使用 | 来调用过滤器,比如,我们想让字符串全部大写字符显示: {{ name | uppercase }} 当然了,我们也可以在JavaScript中使用$filter服务来调用过滤器,还拿字符串大写来举例: app.controller('DemoController', ['$scope', '$filt

  • 实例解析angularjs的filter过滤器

    现在公司用ionic,就是基于angularjs封装了一些api用于webapp,最近用的angularjs的filter确实省了很多代码,现在总结一下! ng比较鸡肋的过滤器,这里就一笔带过吧!鸡汤类常用的filter后面上例子. lowercase(小写) {{ lastName | lowercase }} uppercase(大写) {{ lastName | uppercase }} number(格式化数字) number过滤器可以为一个数字加上千位分割,像这样,123,456,78

  • AngularJS过滤器filter用法实例分析

    本文实例讲述了AngularJS过滤器filter用法.分享给大家供大家参考,具体如下: 这节我们来看看angularjs的过滤器filter. 在我们开发中经常需要在页面显示给用户的信息需要一定处理格式化,才能显示给用户.比如时间本地化,或者yyyy-MM-dd HH:mm:ss格式,数字精度格式化,本地化,人名格式化等等.在angularjs中为我们提供了叫filter的指令,让我们能够很轻易就能做到着一些列的功能,angularjs内部为我们提供了number等很多内置的filter.并且

  • 详解AngularJS中的filter过滤器用法

    系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter.如果对smarty比较熟悉的话,学习angularjs会比较容易一点.这篇简单说一下angularjs的filter功能,angularjs的filter功能可分为二种,一种是内置的过滤器,一种是自定义的. 一,内置的过滤器 1,uppercase,lowercase大小转换 {{ "lower cap string" | uppercase }} //结果:

  • AngularJs学习第八篇 过滤器filter创建

    demo 这是整个示例demo 1.filter.js文件 angular.module("exampleApp", []) .constant("productsUrl", "http://localhost:/products") .controller("defaultCtrl", function ($scope, $http, productsUrl) { $http.get(productsUrl).success

  • 详解AngularJS中$filter过滤器使用(自定义过滤器)

    1.内置过滤器 * $filter 过滤器,是angularJs中用来处理数据以更好的方式展示给我用户.比如格式化日期,转换大小写等等. * 过滤器即有内置过滤器也支持自定义过滤器.内置过滤器很多,可以百度.关键是如何使用: * 1.在HTML中直接使用内置过滤器 * 2.在js代码中使用内置过滤器 * 3.自定义过滤器 * * (1)常用内置过滤器 * number 数字过滤器,可以设置保留数字小数点后几位等 * date 时间格式化过滤器,可自己设置时间格式 * filter 过滤的数据一般

  • 详解Angularjs filter过滤器

    系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter.如果对smarty比较熟悉的话,学习angularjs会比较容易一点.这篇简单说一下angularjs的filter功能,angularjs的filter功能可分为二种,一种是内置的过滤器,一种是自定义的. Filter是用来格式化数据用的. Filter的基本原型( '' 类似于Linux中的管道模式): {{ expression filter }} Filter可

  • 详解JavaEE使用过滤器实现登录(用户自动登录 安全登录 取消自动登录黑用户禁止登录)

    在我们生活中,对于账户的自动登录已经很常见了,所以利用过滤器实现这个功能. 主要介绍用户的自动登录和取消自动登录,以及实现一天自动登录或者n天实现自动登录,当用户ip被加入到黑名单之后,直接利用过滤器返回一个警告页面. 过滤器的功能很是强大,我们只需要在写好的前台后servlet之后进行添加就可以实现这个功能 Ps:这个仅仅只是一个演示而已,里面的访问数据库的部分,自己随意模拟了下,主要是突出实现自动登录的功能. 前台代码: 前台代码是成功与否都在这个页面显示.用到的技术:jstl标签的应用,s

  • 详解Vue串联过滤器的使用场景

    平时开发中,需要用到过滤器的地方有很多,比如单位转换.数字打点.文本格式化等,比如: Vue.filter('toThousandFilter', function (value) { if (!value) return '' value = value.toString() return .replace(str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g, '$1,') }) 实现效果: 30000

  • 详解angularjs获取元素以及angular.element()用法

    本文介绍了详解angularjs获取元素以及angular.element()用法 ,分享给大家,具体如下: addClass()-为每个匹配的元素添加指定的样式类名 after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点 append()-在每个匹配元素里面的末尾处插入参数内容 attr() - 获取匹配的元素集合中的第一个元素的属性的值 bind() - 为一个元素绑定一个事件处理程序 children() - 获得匹配元素集合中每个元素的子元素,选择器选择性筛选

  • 详解AngularJS中的表单验证(推荐)

    AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则式,很方便的完成验证,理论上所有的验证都可以用正则式完成 //javascript $scope.mobileRegx = "^1(3[0-9]|4[57]|5[0-35-9]|7[01678]|8[0-9])\\d{8}$"; $scope.emailRegx = "^[a-z]([a-z0-9]*[-_]?

  • 详解AngularJS ng-class样式切换

    整理文档,搜刮出一个详解AngularJS ng-class样式切换,稍微整理精简一下做下分享. 1.HTML <ion-view> <ion-content> <div class="button-bar"> <div ng-class="{true: 'bgstyle-check', false: 'bgstyle'}[isFirst]" ng-click="isFirst = !isFirst"&g

  • 详解angularjs实现echart图表效果最简洁教程

    本文介绍了详解angularjs实现echart图表效果最简洁教程,分享给大家,具体如下: ehcart是百度做的数据图表,基于原生js.接口和配置都写的很好很易读,还可以用于商用. 一 echart包引用 下载解压,放入lib中. 下载地址:echart_jb51.rar 并在index.html中引用如图两个js文件. app.js中引用angular-echarts 二 页面 html页面 <!--饼图--> <div> <donut-chart config=&quo

  • 详解VUE2.X过滤器的使用方法

    VUE2.X过滤器的使用方法有几种,今天讲一种,以cnode社区API为示例,转换tab类型为中文汉字. 首先我们在assets文件夹中新建个js的文件夹,并新建common.js,然后将过滤器写在这个文件中.当然你也可以写在单个组件中,这个等下后面说. /** * 将tab类型转换成汉字 * @param {String} tab 待转换前的tab值 * @return {String} 转换后的tab中文 */ export function change (tab) { switch (t

随机推荐