华山资源网

AngularJs学习第八篇 过滤器filter创建
网络编程 2024/11/14 佚名
3 1

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 使用

<!DOCTYPE html>
<html xmlns="http://www.w.org//xhtml" ng-app="exampleApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-"/>
<title></title>
<script src="/UploadFiles/2021-04-02/angular.js">


　　运行的结果：


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


Use filter




过滤器分为两类：




1、对单个数据的过滤




2、对集合进行操作。




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




　　 currency：“f" 就可以是价格过滤成英镑。




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




　　 number： 表示数据小数位保留位，




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




在基本demo中我加入这样：





<div class="panel-heading">
<h class="btn btn-primary">Products</h>
</div>
<div class="panel-body">
Limit:<select ng-model="limitValue" ng-options="p for p in limitRange" ></select>
</div> 
　　filter.js中加入了：
$http.get(productsUrl).success(function (data) {
$scope.products = data;//直接转成了数组
$scope.limitValue = "";//要是字符串
<span style="background-color: rgb(, , );"> $scope.limitRange = [];
for (var i = ; i <= $scope.products.length; i++) {
$scope.limitRange.push(i.toString());
<span style="background-color: rgb(, , );"> }</span></span>
}); 
　<tr ng-repeat="item in products|limitTo:limitValue">
<td>{{item.name | uppercase}}</td>
<td>{{item.category}}</td>
<td>{{item.price | currency}}</td>
<td>{{item.expiry| number }}</td>
<td>{{item | json}}</td>
</tr> 　　
<span style="line-height: .; font-family: verdana, Arial, Helvetica, sans-serif; font-size: px; background-color: rgb(, , );">　</span>





在写函数必须写在 success中，因为采用异步获取json数据。




结果：




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


limit :就可以调节在页面显示的个数。




Create filter




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




先说如何定义个过滤器： 过滤器是通过module.filter 创建的，创建的一般格式为：




angular.module("exampleApp")//表示获取一个模块。filter是在模块下创建的。




.filter("labelCase", function () { //接收两个参数，第一个参数表示过滤器的名字，第二个是一个工厂函数




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







if(angular.isString(value))
{
var intermediate = reverse "htmlcode">



<link href="bootstrap.css" rel="stylesheet" />
<script src="/UploadFiles/2021-04-02/filter.js">


　好了现在我来更改下数据：







<td>{{item.name | labelCase:true}}</td> 





　　前面讲过如果需要添加配置信息，书写格式是 过滤器 ：option 




当然默认的参数也可以不写，就会默认给Null值或者undefined。




结果：




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




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







angular.module("exampleApp")
.filter("labelCase", function () {
return function (value, reverse) {
if (angular.isString(value)) {
var intermediate = reverse "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;
}
}
}); 





　　html改的部分：







<tr ng-repeat="item in products | skip: "> 





　　结果：总共是六条数据，有使用了skip过滤器给过掉2条。




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


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







angular.module("exampleApp")
.filter("labelCase", function () {
return function (value, reverse) {
if (angular.isString(value)) {
var intermediate = reverse "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过滤器，因为他返回的是一个函数，所以我们能继续传参。







<tr ng-repeat="item in products | take::"> 





　　结果：




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


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




                                

                                

                                     

                                
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com