演示

这是整个示例演示

1、过滤器。射流研究…文件

angular.module('exampleApp '，[]).常量(“产品Url”，“http://localhost :/产品”).控制器(' defaultCtrl '，函数($scope，$http，ProductURl){ $ http。获取(ProductURl).成功（函数（数据){ $ scope.products=data//直接转成了数组});});这里我把引入的服务作为一个常量，这样写的好处是我便于修改。

对于如何使用$http服务，请参考我的AngularJs(三)已部署使用

！DOCTYPE html html xmlns=' http://www .w . org//XHTML ' ng-app=' exampeap ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-'/title/title脚本src=' http : angular。js '/script link href=' bootstrap-theme。CSS ' rel='样式表/link href='bootstrap.css' rel='样式表/script src=' http :筛选器。js '/script/head body ng-controller=' defaultCtrl ' div class=' panel ' div class=' panel-head ' h class=' BTN BTN-初级'产品/h/div class运行的结果：

使用过滤器

过滤器分为两类：

1、对单个数据的过滤

2、对集合进行操作。

一、对数据进行操作使用比较简单，如演示上所示，在{ {项目|货币}}等，就可以进行格式化。

货币：“f”就可以是价格过滤成英镑。

单个数据的过滤器想过滤的数据格式，在过滤器后使用：在相应的格式字符。

号码：表示数据小数位保留位，

二：集合过滤，从集合中过滤出一定的数量。

在基本演示中我加入这样：

div class=' panel-heading ' h class=' BTN BTN-主要'产品/h/div class=' panel-body '限值： select ng-model=' limit value ' ng-options=' p for p in limit range '/select/div筛选器。射流研究…中加入了：$ http。获取(ProductURl).成功（函数（数据){ $ scope.products=data//直接转成了数组$ scope.limitValue=//要是字符串span style='底色： RGB(，)；$ scope。limit range=[]；对于(var I=；I=$ scope。产品。长度；I){ $ scope。限制范围。push(I . ToString())；span style='底色： RGB(，)；}/span/span })；tr ng-repeat=' item in products | limit to : limit value ' TD { { item。名称|大写} }/tdtd { { item }。类别} }/tdtd { { item }。价格|货币} }/tdtd { { item }。expire | number } }/tdtd { { item | JSON } }/TD/tr span style=' line-height :font-family: verdana，Arial，Helvetica，无衬线字体；font-size : px背景-color: rgb(，)；'/span在写函数必须写在成功中，因为采用异步获取数据数据。

结果：

极限：就可以调节在页面显示的个数。

创建过滤器

开发有两种过滤器，首先我们可以创建对单个数据进行格式的过滤器，比如：输出的字符串首字母大写。

先说如何定义个过滤器：过滤器是通过模块。过滤器创建的，创建的一般格式为：

angular.module('范例App')//表示获取一个模块过滤器。是在模块下创建的。筛选器(“标签库”，函数(){ //接收两个参数，第一个参数表示过滤器的名字，第二个是一个工厂函数

返回函数（值，反向){ //返回一个工人函数，对坐相应的过滤处理。第一个参数表示需要进行格式的对象，第二个参数表示配置，按照什么格式。

if(棱角分明。IsString(value)){ var intermediate=reverse？价值。touppercase()值：tolowercase()；返回（反向？中级[]。toLowerCase() :中间体[]。toUpperCase()。中级。substr())；} else {返回值；}}});这个是我另写到一个射流研究…文件中的customFilter.js。不要忘记添加。

link href='bootstrap.css' rel='样式表'/脚本src=' http :筛选器。js /脚本脚本src=' http : customfilter。js /脚本好了现在我来更改下数据：

TD { { item }。名称|标签大小写： TRUe } }/TD前面讲过如果需要添加配置信息，书写格式是过滤器：选项

当然默认的参数也可以不写，就会默认给空值或者未定义。

结果：

自定义一个对各数据处理的过滤器函数就是这么简单。

2、自定义个集合处理的函数，就像限制一样。

angular.module(示例应用程序).filter('labelCase '，function(){ return function(value，reverse){ if(angular。ISS string(value)){ var intermediate=reverse？价值。touppercase()值：tolowercase()；返回（反向？中级[]。toLowerCase() :中间体[]。toUpperCase()。中级。substr())；} else {返回值；}}}).filter('skip '，function () {return function(数据，计数){ if(angular。isaarray(数据)角度。是数字(计数)){ if(数据。长度计数| |计数){返回数据；} else {返回数据。切片(计数)；} } else {返回数据；}}});超文本标记语言改的部分：

tr ng-repeat='产品中的项目| skip: '结果：总共是六条数据，有使用了跳跃过滤器给过掉2条。

在自定义过滤器时，发现有个过滤器已经定义了，我不想重复定义，怎么办，我们还可以利用一创建的过滤器进行创建。

angular.module(示例应用程序).filter('labelCase '，function(){ return function(value，reverse){ if(angular。ISS string(value)){ var intermediate=reverse？价值。touppercase()值：tolowercase()；返回（反向？中级[]。toLowerCase() :中间体[]。toUpperCase()。中级。substr())；} else {返回值；}}}).filter('skip '，function () {return function(数据，计数){ if(angular。角度误差(数据)。是数字(计数)){ if(数据。长度计数| |计数){返回数据；} else {返回数据。切片(计数)；} } else {返回数据；}}}).筛选器(“拿着”，函数($filter) {//大家可以看到，我在工厂函数引用了开发的内置服务返回函数（数据、skipcount、takecount) {//大家看下我这里传了三个参数？var skipdata=$filter('skip ')(数据，跳过计数)；//这种写法大家是否迷糊了呢？函数式编程。返回$filter('limitTo')(skipdata，take count)；//limitTo是内置的过滤器。}});$filter('skip ')调用的是跳跃过滤器，因为他返回的是一个函数，所以我们能继续传参。

tr ng-repeat='产品中的项目| take: '结果：

过滤器就是这样就已经完成了。是不是很简单。