1.过滤器主要用于数据的筛选,可以直接在模板使用

语法:

{{expression | filter}}

{{expression | filter | filter2}}

{{expression | filter : param....}}

例子:

demo3.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myController">
<p>{{1234567 | number}}</p>
<p>{{1234567 | number : 3}}</p>
<p>{{1234567 | currency}}</p>
<p>{{date | date : 'yyyy-MM-dd HH:mm:ss'}}</p>
<p>{{[1,2,3,4,5,6] | limitTo:5}}</p>
<p>{{'AbCdefG' | lowercase}}</p>
<p>{{'AbCdefG' | uppercase}}</p>
<p>{{city | filter : '上海'}}</p>
<p>{{city | filter : {address:'h'} }}</p>
<p>{{city | orderBy : 'address' }}</p>
<p>{{city | orderBy : '-address' }}</p>
<p>{{city | filter : checkName }}</p>
</div> </div>
<script type="text/javascript" src="../common/angular/angularjs.js"></script>
<script type="text/javascript" src="demo3.js"></script>
</body>
</html>

demo3.js

/**
* Created by Administrator on 2017/7/22.
*/
angular.module('myApp', []) .factory('myData', function () {
return {
message: 'wddsad',
city: [
{
name: '张三',
address: '上海'
},
{
name: '李四',
address: 'shenzhen'
}
]
};
}) .controller('myController', function ($scope, myData,$filter) {
$scope.date = new Date();
$scope.city = myData.city;
$scope.data = myData; //过滤器
var a = $filter('number')(3000);
// console.log(a);
var b = $filter('json')($scope.data);
// console.log(b); $scope.checkName = function(obj){
if(obj.name.indexOf('张') === -1){
return false;
}
return true;
}
})

效果图

2.自定义过滤器

自定义过滤器有两种方法:推荐用第二种

1. $filterProvider.register()

2.module.filter(name,filterFactory)

第一种方式:$filterProvider.register()

例子

demo4.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myController">
<ul>
<!-- ng-repeat 循环数据,通过 | 调用自定义过滤器 filterAge -->
<li ng-repeat="d in data | filterAge">
{{d.name}}
{{d.age}}
{{d.address}}
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="../common/angular/angularjs.js"></script>
<script type="text/javascript" src="demo4.js"></script>
</body>
</html>

demo4.js

/**
* Created by Administrator on 2017/7/22.
*/
/**
* 第三个参数的 function 注入了三个服务 $filterProvider, $provider, $controllerProvider
* 注入 $filterProvider 用 $filterProvider.register() 方法自定义过滤器
* 注入 $provider 主要是要用到 service ,数据通过 service 初始化,service是 $provider 提供的
* 注入 $controllerProvider 主要是要用到 controller ,controller是 $controllerProvider 提供的
* 其实注入 service,controller都可以通过 moudle 简便方式注入,这里只是提供另外一种写法,一般写法如:
* angular.moudle('myApp',[])
* .service()
* .controller()
* ......
*/
angular.module('myApp', [], function ($filterProvider, $provide, $controllerProvider) {
// 注册 service(注册service时,里面的function返回必须是对象,也就是返回引用类型,不能是字符串或者数字,不然会报错)
$provide.service('myData', function () {
return [
{
name: '张三',
age: 18,
address: '北京'
},
{
name: '李四',
age: 25,
address: '深圳'
}
];
}); //注册自定义过滤器
$filterProvider.register('filterAge', function () {
//这里必须要返回一个function
return function (obj) {
var result = [];
angular.forEach(obj, function (o) {
if (o.age > 20) {
result.push(o);
}
})
return result;
}
}); //注册 controller
$controllerProvider.register('myController', function ($scope, myData) {
console.log(myData);
$scope.data = myData;
}); })

第二种方式:angular.module().filter()

angular.module('myApp', [], function ($filterProvider, $provide, $controllerProvider) {
// 注册 service
$provide.service('myData', function () {
return [
{
name: '张三',
age: 18,
address: '北京'
},
{
name: '李四',
age: 25,
address: '深圳'
}
];
}); //注册自定义过滤器(年龄)
$filterProvider.register('filterAge', function () {
//这里必须要返回一个function
return function (obj) {
var result = [];
angular.forEach(obj, function (o) {
if (o.age > 20) {
result.push(o);
}
})
return result;
}
}); //注册 controller
$controllerProvider.register('myController', function ($scope, myData) {
console.log(myData);
$scope.data = myData;
}); })
//自定义过滤器(城市)(主要就是这里的写法不同,在外层写 filter,思路都一样)
.filter('filterAddress',function () {
//返回一个function
return function (obj) {
var result = [];
angular.forEach(obj, function (o) {
if (o.address === '北京') {
result.push(o);
}
})
return result;
}
})

angular过滤器基本用法的更多相关文章

  1. Angular过滤器

    angular中的过滤器有: currency 过滤货币 number  过滤数字, date  过滤日期 json 把js对象过滤为json字符串 limitTo  截取字符串,参数是正数则从左往右 ...

  2. Servlet过滤器Filter用法

    1 Servlet 过滤器方法 过滤器是一个实现了 javax.servlet.Filter 接口的 Java 类.javax.servlet.Filter 接口定义了三个方法:public void ...

  3. Angular - ng-repeat高级用法

    ng-repeat高级用法: 遍历数组:    <li ng-repeat="item in array">{{item}}</li> 遍历对象:    k ...

  4. Angular过滤器 自定义及使用方法

    首先设置自定义过滤器. 定义模块名:angular .module('myApp') .filter('filterName',function(){ return function(要过滤的对象,参 ...

  5. Angular 过滤器的简单使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. angular.element()的用法

    1.引用jQuery的前提下,和$用法基本相同:angular.element('#').html() 例如: angular.element('#test').html() angular.elem ...

  7. angular过滤器使用 自定义过滤器

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...

  8. 如何angular过滤器进行排序???

    首先定义一个json文件: 然后写HTML文件: <div id="box"> <!--第一个下拉框--> <select ng-model=&quo ...

  9. angular中$q用法, $q多个promise串行/同步/等待), $q.all用法,使用

    $q的基本用法 function fn() { var defer = $q.defer(); setTimeout(function () { console.log(1); defer.resol ...

随机推荐

  1. Grafana+Prometheus系统监控之MySql

    架构 grafana和prometheus之前安装配置过,见:Grafana+Prometheus打造全方位立体监控系统 MySql安装 MySql的地位和重要性就不言而喻了,作为开源产品深受广大中小 ...

  2. Json字符串解析原理、超大json对象的解析

    概述 附上完整的代码:https://pan.baidu.com/s/1dEDmGz3(入口类是Json)JSON:JavaScript 对象表示法(JavaScript Object Notatio ...

  3. 照虎画猫写自己的Spring

    从细节跳出来 看了部分Spring的代码,前面用了四篇内容写了一些读书笔记. 回想起来,论复杂度,Spring够喝上好几壶的.他就像一颗枝繁叶茂的大树,远处看,只是一片绿:走近看,他为你撑起一片小天地 ...

  4. typescript入门基础

    1.typescript介绍 微软开发的一门编程语言,javascript的一个超集,遵循最新的ES6脚本语言规范(2015年发布),它扩展了Javascript的语法,任何已经写好的javascri ...

  5. shell ping一个IP,延时大于5,输出延时大于5s,打印输出

    # ping一个IP,延时大于5,输出延时大于5s,打印输出 #!/bin/bash ip=$* echo $ip num=`ping  -c 10 ${ip}|grep icmp_seq|awk ' ...

  6. Ambari概览

    文章作者:luxianghao 文章来源:http://www.cnblogs.com/luxianghao/p/7886195.html  转载请注明,谢谢合作. 免责声明:文章内容仅代表个人观点, ...

  7. (二)部署solr7.1.0到tomcat

    solr7.1.0部署到tomcat8 官方表示solr5之后的版本不再提供对第三方容器的支持(不提供war包了). "旧式"solr.xml格式不再支持,核心必须使用core.p ...

  8. java 之 工厂模式(大话设计模式)

    在以前的文章里面讲述过简单工厂模式,见链接:http://www.cnblogs.com/zhuxiansheng/p/7873161.html 简单工厂模式解耦了客户端和实现的依赖,不过如果有再次扩 ...

  9. c语言的作用域、变量与结构体

    一.变量的作用域 根据变量的作用域,可以分为: 1.局部变量: 1> 定义:在函数(代码块)内部定义的变量(包括函数的形参) 2> 作用域:局部变量只有在定义它的函数内部使用,其它函数不能 ...

  10. IPv6 VS IPv4,谈谈升级 IPv6 的必要性

    11月26日,中办.国办印发了<推进互联网协议第六版(IPv6)规模部署行动计划>,提出国内要在 5~10 年的时间形成下一代互联网自主技术体系和产业生态,建成全球最大规模的 IPv6 商 ...