angularJs的过滤器扩展及自定义过滤器
一、过滤器扩展
1、过滤器的组合使用
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script>
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
$scope.name = 'hello';
}]);
</script>
</head>
<body>
<div ng-controller="Aaa">
<p>{{ name | limitTo : 2 | uppercase }}</p>
</div>
</body>
</html>
2、通过服务的方式在js中使用过滤器
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script>
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope','$filter',function($scope,$filter){
//$scope.name = $filter('uppercase')('hello'); //对hello进行转大写的操作 //$scope.name = $filter('number')('1326554654');
$scope.name = $filter('number')('1326554654.545485',4); //4表示设置保留的小数位
}]);
</script>
</head>
<body>
<div ng-controller="Aaa">
<p>{{ name }}</p>
</div>
</body>
</html>
二、自定义过滤器
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script>
var m1 = angular.module('myApp',[]); //自定义过滤器
m1.filter('firstUpper',function(){
return function(str,num){
//console.log(num); //num没有什么用，但是可以找到这个num
return str.charAt(0).toUpperCase() + str.substring(1);
}
}); m1.controller('Aaa',['$scope','$filter',function($scope,$filter){
$scope.name = $filter('firstUpper')('hello');
}]);
</script>
</head>
<body>
<div ng-controller="Aaa">
<p>{{ name }}</p>
<p>{{ name | firstUpper }}</p>
</div>
</body>
</html>
angularJs的过滤器扩展及自定义过滤器的更多相关文章
- AngularJs练习Demo8 自定义过滤器
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport&quo ...
- angularjs学习第三天笔记（过滤器第二篇---filter过滤器及其自定义过滤器）
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
- VueJs 自定义过滤器使用总结
过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档, http://cn.vuejs.org/api/#过滤器 ,过滤器通常会使 ...
- django之创建第6-1个项目-自定义过滤器
1.在站点blog目录下创建templatetags文件夹 2.templatetags目录下需要作为一个包来处理和调用其中的内容,需要有一个__init__.py文件 3.在templatetags ...
- vue.js学习 自定义过滤器使用（1）
在这个教程中,我们将会通过几个例子,了解和学习VueJs的过滤器.我们参考了一些比较完善的过滤器,比如orderBy 和 filterBy.而且我们可以链式调用过滤器,一个接一个过滤.因此,我们可以定 ...
- vue2.0 自定义过滤器（filter）实例
一.过滤器简介 (1)过滤器创建 过滤器的本质 是一个有参数 有返回值的方法 new Vue({ filters:{ myCurrency:function(myInput){ return 处理后的 ...
- python测试开发django-70.自定义过滤器filter
前言 django的模板有很多内置的过滤器,可以满足一些常见的需求,如果有些需求内置过滤器无法满足,那么我们需要自己写一些过滤器了. 自定义过滤器 先在app下新建一个 templatetags 目录 ...
- DRF框架（九）——drf偏移分页组件、drf游标分页组件(了解)、自定义过滤器、过滤器插件django-filter
drf偏移分页组件 paginations.py from rest_framework.pagination import LimitOffsetPagination class MyLimitOf ...
- drf偏移分页组件-游标分页-自定义过滤器-过滤器插件django-filter
drf偏移分页组件 LimitOffsetPagination 源码分析:获取参数 pahenations.py from rest_framework.pagination import Limit ...
随机推荐
- SQL Server 两个时间段的差and时间截取到时分
/*--------------------------时间截取到时分-----------------------------------*/ ), ),)--返回2017-11-24 19:25 ...
- C# 过滤sql特殊字符串方法
1. /// <summary> /// 过滤不安全的字符串 /// </summary> /// <param name="Str" ...
- 编写更好的jQuery代码（转）
这是一篇关于jQuery的文章,写到这里给初学者一些建议. 原文地址:http://flippinawesome.org/2013/11/25/writing-better-jquery-code/ ...
- 提交表单时，post方式无法提交（一种情况）
tomcat6,设置文件上传不限制大小maxPostSize="0" 但是在tomcat7及以后版本,应设置为小于0,如maxPostSize="-1" 否则 ...
- Spring扩展：Spring框架的由来
一.Spring框架的由来
- js得到数组的下标值
<script type="text/javascript"> var arr = [1,2,3,4,5,6,2,4,55]; for(var i=0; $i<a ...
- MySQL：PyMySQL&ORM
一.PyMySQL介绍 PyMySQL 是在 Python3.x 版本中用于连接 MySQL 服务器的一个库,Python2中则使用mysqldb. Django中也可以使用PyMySQL连接MySQ ...
- Benefits of encapsulation
①:通过方法来控制成员变量的操作,提高了代码的安全性. ②:把代码用方法进行封装,提高了代码的复用性.
- Android 线程池的类型、区别以及为何要用线程池
每个 Android 应用进程在创建时,会同时创建一个线程,我们称之为主线程,负责更新 UI 界面以及和处理用户之间的交互,因此,在 Android 中,我们又称之为 UI 线程.一个进程中 UI 线 ...
- VUE知识day3_vue插件总结