angular过滤器基本用法
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过滤器基本用法的更多相关文章
- Angular过滤器
angular中的过滤器有: currency 过滤货币 number 过滤数字, date 过滤日期 json 把js对象过滤为json字符串 limitTo 截取字符串,参数是正数则从左往右 ...
- Servlet过滤器Filter用法
1 Servlet 过滤器方法 过滤器是一个实现了 javax.servlet.Filter 接口的 Java 类.javax.servlet.Filter 接口定义了三个方法:public void ...
- Angular - ng-repeat高级用法
ng-repeat高级用法: 遍历数组: <li ng-repeat="item in array">{{item}}</li> 遍历对象: k ...
- Angular过滤器 自定义及使用方法
首先设置自定义过滤器. 定义模块名:angular .module('myApp') .filter('filterName',function(){ return function(要过滤的对象,参 ...
- Angular 过滤器的简单使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- angular.element()的用法
1.引用jQuery的前提下,和$用法基本相同:angular.element('#').html() 例如: angular.element('#test').html() angular.elem ...
- angular过滤器使用 自定义过滤器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...
- 如何angular过滤器进行排序？？？
首先定义一个json文件: 然后写HTML文件: <div id="box"> <!--第一个下拉框--> <select ng-model=&quo ...
- angular中$q用法, $q多个promise串行/同步/等待）， $q.all用法,使用
$q的基本用法 function fn() { var defer = $q.defer(); setTimeout(function () { console.log(1); defer.resol ...
随机推荐
- java 虚拟机的类加载机制
Java 虚拟机的类加载机制 关于类加载机制: 虚拟机把描述类的数据从Class 文件加载到内存,并对数据进行效验.转换解析和初始化,最终 形成可以被虚拟机直接使用的Java 类型,就是虚拟机的类 ...
- 基于.NET CORE微服务框架 -surging 基于messagepack、protobuffer、json.net 性能对比
1.前言 surging内部使用的是高性能RPC远程服务调用,如果用json.net序列化肯定性能上达不到最优,所以后面扩展了protobuf,messagepack序列化组件,以支持RPC二进制传输 ...
- python基础-------模块与包（四）
configparser模块与 subprcess 利用configparser模块配置一个类似于 windows.ini格式的文件可以包含一个或多个节(section),每个节可以有多个参数(键=值 ...
- C#操作防火墙控制电脑某些软件联网
问题: 目前公司软件刚由单机软件更改为联网软件,许多客户反映希望能够有一个功能来控制电脑上某些必用软件,如qq,公司软件联网,而其他不必要的如网页,游戏等软件不允许联网,于是向公司反映希望可以有一个功 ...
- Hibernate持久化对象的三种状态深入理解
关于OID hibernate缓存是一个map,他会根据OID作为缓存对象的key,我们的映射文件中<id>标签指定的属性值会作为OID 持久化对象的三种状态 为了方便理解,Hiberna ...
- TFboy养成记 MNIST Classification （主要是如何计算accuracy）
参考:莫烦. 主要是运用的MLP.另外这里用到的是批训练: 这个代码很简单,跟上次的基本没有什么区别. 这里的lossfunction用到的是是交叉熵cross_entropy.可能网上很多形式跟这里 ...
- 【Java疑难杂症】利用Java核心库实现简单的AOP
Spring是一个十分火热开源框架,而AOP(面向切面编程)则是Spring最重要的概念之一,为了更好的理解和学习AOP的思想,使用核心库来实现一次不失为一个好方法. 首先介绍一下AOP的概念,AOP ...
- 基于ESXI6.5的服务器基本配置（HP DL388 Gen 9）
最近一段时间由于做毕业设计的原因,一直处于忙碌状态,刚做完毕业设计,导师处于项目的原因,买了一台惠普服务器(人民币1.7万),服务器自带的内存仅有16 G,硬盘也就只有600G,而且磁盘还做了raid ...
- Python入门 - 生成随机数
生成随机数是编程中经常用到的功能,下面讲几种常用的随机函数randint,uniform, randrange: 一.生成随机整数 randint import random a = random. ...
- SQL Count（*）函数，GROUP_By,Having的联合使用
COUNT(*) 函数返回在给定的选择中被选的行数. 语法:SELECT COUNT(*) FROM table 使用:现在有一个表,名叫app_category,从Navicat中可以看到表中 ...