一、过滤器扩展

　　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的过滤器扩展及自定义过滤器的更多相关文章

  1. AngularJs练习Demo8 自定义过滤器

    @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport&quo ...

  2. angularjs学习第三天笔记（过滤器第二篇---filter过滤器及其自定义过滤器）

    您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...

  3. VueJs 自定义过滤器使用总结

    过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档, http://cn.vuejs.org/api/#过滤器 ,过滤器通常会使 ...

  4. django之创建第6-1个项目-自定义过滤器

    1.在站点blog目录下创建templatetags文件夹 2.templatetags目录下需要作为一个包来处理和调用其中的内容,需要有一个__init__.py文件 3.在templatetags ...

  5. vue.js学习 自定义过滤器使用（1）

    在这个教程中,我们将会通过几个例子,了解和学习VueJs的过滤器.我们参考了一些比较完善的过滤器,比如orderBy 和 filterBy.而且我们可以链式调用过滤器,一个接一个过滤.因此,我们可以定 ...

  6. vue2.0 自定义过滤器（filter）实例

    一.过滤器简介 (1)过滤器创建 过滤器的本质 是一个有参数 有返回值的方法 new Vue({ filters:{ myCurrency:function(myInput){ return 处理后的 ...

  7. python测试开发django-70.自定义过滤器filter

    前言 django的模板有很多内置的过滤器,可以满足一些常见的需求,如果有些需求内置过滤器无法满足,那么我们需要自己写一些过滤器了. 自定义过滤器 先在app下新建一个 templatetags 目录 ...

  8. DRF框架（九）——drf偏移分页组件、drf游标分页组件(了解)、自定义过滤器、过滤器插件django-filter

    drf偏移分页组件 paginations.py from rest_framework.pagination import LimitOffsetPagination class MyLimitOf ...

  9. drf偏移分页组件-游标分页-自定义过滤器-过滤器插件django-filter

    drf偏移分页组件 LimitOffsetPagination 源码分析:获取参数 pahenations.py from rest_framework.pagination import Limit ...

随机推荐

  1. 数据存储之第三方FMDB优化

    最近项目要用到数据库,采用的是第三方FMDB, 之前做C#时用过sqlHelper,自己就按着sqlHelper的思路封装了一下,封装的也比较简单,看到网上有一些根据FMDB封装的ORM框架,但基本都 ...

  2. Rest分享

    分享提纲引言:微服务, 漂亮小姑娘,帅气小伙 这老头是个奇人,特别擅长抽象归纳和制造概念.特别是微服务这种新生的名词,都有一个特点:一解释就懂,一问就不知,一讨论就打架. REST是什么,是一个模式, ...

  3. 八： 操作提示（wxml 即将废弃）

    首先需要注意的是 wxml的这些属性将要被废弃,不过可以看两眼.不愿意看的可以看下一章节同样是操作回馈只不过是js版的哦.   一.action-sheet 操作菜单 从屏幕底下出来菜单. 这里不用w ...

  4. Java中HashSet的解读

    一． HashSet源代码 HashSet 的实现   对于 HashSet 而言,它是基于 HashMap 实现的,HashSet 底层采用 HashMap 来保存所有元素,因此 HashSet 的 ...

  5. Autocomplete 自动提示

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

  6. Hadoop学习笔记(10) ——搭建源码学习环境

    Hadoop学习笔记(10) ——搭建源码学习环境 上一章中,我们对整个hadoop的目录及源码目录有了一个初步的了解,接下来计划深入学习一下这头神象作品了.但是看代码用什么,难不成gedit?,单步 ...

  7. JS 监听键盘按键

    1. 实现Ctrl+ Enter 组合键触发事件 document.onkeydown=function(event){ var keyNum = window.event ? event.keyCo ...

  8. 基于.Net下整合RestSharp，实现REST服务客户端

    一. 准备工作 1. 点击此访问 RestSharp 官网,可作参考 2. VS2012 中安装支持.Net4.0的最新版 RestSharp 插件 工具---NuGet程序包管理器---程序包管理器 ...

  9. HDU 4747（AC不能）

    http://acm.hdu.edu.cn/showproblem.php?pid=4747

  10. CakePHP调用model类和foreach循环

    1. 引入Model类 2.调用model类(Guarantee)下的getCity()方法 3.写sql语句 并返回获得值 4.foreach循环取得的城市