demo
这是整个示例demo
1、filter.js文件
angular.module(\"exampleApp\", []) .constant(\"productsUrl\", \"http://localhost:/products\") .controller(\"defaultCtrl\", function ($scope, $http, productsUrl) { $http.get(productsUrl).success(function (data) { $scope.products = data;//直接转成了数组 }); });
这里我把引入的服务作为一个常量,这样写的好处是我便于修改。
对于如何使用$http 服务,请参考我的AngularJs(三) Deployed 使用
Products
Name Category Price expiry {{item.name | uppercase}} {{item.category}} {{item.price | currency}} {{item.expiry| number }} {{item | json}}
运行的结果:
Use filter
过滤器分为两类:
1、对单个数据的过滤
2、对集合进行操作。
一、 对数据进行操作使用比较简单,如demo上所示,在{{item | currency}} 等,就可以进行格式化。
currency:“f\" 就可以是价格过滤成英镑。
单个数据的过滤器 想过滤的数据格式,在过滤器后使用 :在相应的格式字符。
number: 表示数据小数位保留位,
二: 集合过滤,从集合中过滤出一定的数量。
在基本demo中我加入这样:
Products Limit:filter.js中加入了: $http.get(productsUrl).success(function (data) { $scope.products = data;//直接转成了数组 $scope.limitValue = \"\";//要是字符串 $scope.limitRange = []; for (var i = ; i <= $scope.products.length; i++) { $scope.limitRange.push(i.toString()); } });{{item.name | uppercase}} {{item.category}} {{item.price | currency}} {{item.expiry| number }} {{item | json}}
在写函数必须写在 success中,因为采用异步获取json数据。
结果:
limit :就可以调节在页面显示的个数。
Create filter
AngularJs有两种过滤器,首先我们可以创建对单个数据进行格式的过滤器,比如:输出的字符串首字母大写。
先说如何定义个过滤器: 过滤器是通过module.filter 创建的,创建的一般格式为:
angular.module(\"exampleApp\")//表示获取一个模块。filter是在模块下创建的。
.filter(\"labelCase\", function () { //接收两个参数,第一个参数表示过滤器的名字,第二个是一个工厂函数
return function (value, reverse) { //返回一个工人函数,对坐相应的过滤处理。第一个参数表示需要进行格式的对象,第二个参数表示配置,按照什么格式。
if(angular.isString(value)) { var intermediate = reverse ? value.toUpperCase() : value.toLowerCase(); return (reverse ? intermediate[].toLowerCase() : intermediate[].toUpperCase() + intermediate.substr()); }else { return value; } } });
这个 是我另写到一个js文件中 的。customFilter.js 不要忘记添加。
好了现在我来更改下数据:
{{item.name | labelCase:true}}
前面讲过如果需要添加配置信息,书写格式是 过滤器 :option
当然默认的参数也可以不写,就会默认给Null值或者undefined。
结果:
自定义一个对各数据处理的过滤器函数就是这么简单。
2、自定义个集合处理的函数,就像limitTo一样。
angular.module(\"exampleApp\") .filter(\"labelCase\", function () { return function (value, reverse) { if (angular.isString(value)) { var intermediate = reverse ? value.toUpperCase() : value.toLowerCase(); return (reverse ? intermediate[].toLowerCase() : intermediate[].toUpperCase() + intermediate.substr()); } else { return value; } } }) .filter(\"skip\", function () { return function(data,count) { if (angular.isArray(data) && angular.isNumber(count)) { if(data.length
html改的部分:
结果:总共是六条数据,有使用了skip过滤器给过掉2条。
在自定义过滤器时,发现有个过滤器已经定义了,我不想重复定义,怎么办,我们还可以利用一创建的过滤器进行创建。
angular.module(\"exampleApp\") .filter(\"labelCase\", function () { return function (value, reverse) { if (angular.isString(value)) { var intermediate = reverse ? value.toUpperCase() : value.toLowerCase(); return (reverse ? intermediate[].toLowerCase() : intermediate[].toUpperCase() + intermediate.substr()); } else { return value; } } }) .filter(\"skip\", function () { return function (data, count) { if (angular.isArray(data) && angular.isNumber(count)) { if (data.length < count || count < ) { return data; } else { return data.slice(count); } } else { return data; } } }) .filter(\"take\", function ($filter) {//大家可以看到,我在工厂函数引用了AngularJs的内置服务。 return function (data, skipcount, takecount) {//大家看下我这里传了三个参数? var skipdata = $filter(\'skip\')(data, skipcount);//这种写法大家是否迷糊了呢?函数式编程。 return $filter(\"limitTo\")(skipdata, takecount);//limitTo是内置的过滤器。 } });$filter(\'skip\') 调用的是skip过滤器,因为他返回的是一个函数,所以我们能继续传参。
结果:
过滤器就是这样就已经完成了。是不是很简单。
本文地址:https://www.stayed.cn/item/26683
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我
我的博客
人生若只如初见,何事秋风悲画扇。
我的标签
随笔档案
- 2024-02(2)
- 2023-06(1)
- 2023-05(1)
- 2023-04(14)
- 2023-03(3)
- 2023-01(6)
- 2022-12(5)
- 2022-11(5)
- 2022-07(2)
- 2022-06(4)
- 2022-05(3)
- 2022-03(1)
- 2021-12(6)
- 2021-11(1)
- 2021-10(3)
- 2021-09(5)
- 2021-07(5)
- 2021-02(2)
- 2021-01(7)
- 2020-12(18)
- 2020-11(14)
- 2020-10(12)
- 2020-09(10)
- 2020-08(22)
- 2020-07(2)
- 2020-06(1)
- 2020-04(5)
- 2020-03(9)
- 2020-02(7)
- 2020-01(9)
- 2019-12(8)
- 2019-11(10)
- 2019-10(11)
- 2019-09(17)
- 2019-08(16)
- 2019-07(6)
- 2019-06(3)
- 2019-04(1)
- 2019-03(8)
- 2019-02(5)
- 2019-01(1)
- 2018-11(2)
- 2018-10(3)
- 2018-09(1)
- 2018-08(3)
- 2018-07(3)
- 2018-06(7)
- 2018-04(4)
- 2018-03(5)
- 2018-02(4)
- 2018-01(22)
- 2017-12(3)
- 2017-11(5)
- 2017-10(15)
- 2017-09(26)
- 2017-08(1)
- 2017-07(3)