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 ...
随机推荐
- 9.Symbol
Symbol Symbol 概述 ES5 的对象属性名都是字符串,这容易造成属性名的冲突.比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法(mixin 模式),新方法的名字就有可能与现有 ...
- 小白学习之Code First（一）
1.根据自己的理解,Code First :通过实体类和相关配置生成对应的数据库,实现实体和数据库的映射关系,或通过实体类和相关配置与已经生成的实体与已经存在的数据库搭建映射关系 例: 实体类:Stu ...
- vscode下eslint代码规范
直接上规范吧: // 将设置放入此文件中以覆盖默认设置 { "editor.fontSize": 17, "editor.tabSize": 2, " ...
- WPF带占位符的TextBox
简介 效果图如下: 使用的XAML代码如下: <Window x:Class="PlaceHolderTextBox.MainWindow" xmlns="http ...
- SLF4+Logback 使用及配置
在SpringBoot项目中使用slf4+logback ①在pom.xml中添加依赖 <dependency> <groupId>ch.qos.logback</gro ...
- k：特殊的线性表—队列
队列的概念: 队列是另一种特殊的线性表,它的特殊性体现在其只允许在线性表的一端插入数据元素,在线性表的另一端删除数据元素(一般会采用在线性表的表尾那端(没被head指针所指的那端)插入数据元素,在线 ...
- Java关闭钩子的应用 - Shutdown Hook
背景 在开发中,遇到这种情况,多个线程同时工作,突然一个线程遇到了fetal的错误,需要立即终止程序,等人工排查解决了问题之后重新启动.但是这样会有一个问题,程序终止时,其他线程可能正在进行重要操作, ...
- Bash拾遗：变量
使用引号包裹变量 在<高级Bash脚本编程指南>中的4.1节中有这么个例子: hello="A B C D" echo $hello # A B C D echo &q ...
- sql:PostgreSQL
PostgreSQL sql script: -- Database: geovindu -- DROP DATABASE geovindu; CREATE DATABASE geovindu WIT ...
- Bookmarklet编写指南
作者: 阮一峰 日期: 2011年6月11日 前一段日子,我写了两个Bookmarklet----"短网址生成"和"短网址还原". 它们用起来很方便,除了我本人 ...