一、过滤器扩展

　　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. JAVA-1NIO概述

    注意: 转载自并发编程网 – ifeve.com本文链接地址: Java NIO系列教程(一) Java NIO 概述 JAVA-1NIO概述 Java NIO 由以下几个核心部分组成: Channe ...

  2. SQL Serever学习13——数据库编程语言

    编程基础 注释 注释命名来对一些语句进行说明,便于日后维护或者其他用户理解,注释不会执行. 单行注释 SELECT GETDATE() --查询当前日期 多行注释 /* 注释有助于 理解操作的内容 查 ...

  3. [javaSE] IO流（管道流）

    之前我们使用io流,都是需要一个中间数组,管道流可以直接输入流对接输出流,一般和多线程配合使用,当读取流中没数据时会阻塞当前的线程,对其他线程没有影响 定义一个类Read实现Runable接口,实现r ...

  4. fb登陆遇到傻逼问题

    centos中curl需要ssl的支持, 所以我重新安装了curl,并安装了openssl-devel,这个是依赖,必须的. so 完美

  5. [LeetCode]Letter Combinations of a Phone Number题解

    Letter Combinations of a Phone Number: Given a digit string, return all possible letter combinations ...

  6. 使用Mac自带svn搭建服务器，并使用idea进行连接

    一.检查Mac自带SVN版本号 二.创建代码仓库 $ mkdir -p /Users/Shared/svn/repository $ svnadmin create /Users/Shared/svn ...

  7. Child extends Parent，可以得到什么？

    如果有Child extends Parent 1.子类可以调用父类无参的构造函数,子类的有参构造函数和是否调用父类的有参数的构造函数无必然联系 2.接口继承的时候,只能继承接口不能继承类,因为如果类 ...

  8. 解决nexus3报Cannot open local storage 'component' with mode=rw的异常问题

    起因:正常使用的公司Maven.Docker私有仓库,突然镜像不能推送,返回getsockopt: connection refused,用docker客户端登录也是返回同样的错误,查看nexus3日 ...

  9. PID控制算法

    PID控制算法 四轴如何起飞的原理 四轴飞行器的螺旋桨与空气发生相对运动,产生了向上的升力,当升力大于四轴的重力时四轴就可以起飞了. 四轴飞行器飞行过程中如何保持水平: 我们先假设一种理想状况:四个电 ...

  10. ArcGIS中的坐标系统定义与投影转换

    坐标系统是GIS数据重要的数学基础,用于表示地理要素.图像和观测结果的参照系统,坐标系统的定义能够保证地理数据在软件中正确的显示其位置.方向和距离,缺少坐标系统的GIS数据是不完善的,因此在ArcGI ...