一、过滤器扩展

　　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. [转]NancyFx/Nancy

    本文转自:https://github.com/NancyFx/Nancy/wiki/Documentation Getting Started Introduction Exploring the ...

  2. Action、View、ActionResult、ViewResult、ContentResult

    可以,ASP.NET MVC的view和Controller不是严格的匹配的,一个Action Method可以引用多个view,而一个View也可以被一个Action方法使用如下代码所示:    1 ...

  3. XmlSerializer序列化

    XmlSerializer在命名空间using System.Xml.Serialization下. 序列化和反序列化的代码: using System.IO; using System.Xml; u ...

  4. jQuery Ajax实例 ($.ajax_$.post_$.get)

    Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. $.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到j ...

  5. Java - 谨慎实现Comparable接口

    类实现了Comparable接口就表明类的实例本身具有内在的排序关系(natural ordering). 因此,该类可以与很多泛型算法和集合实现进行协作. 而我们之需要实现Comparable接口唯 ...

  6. Ubuntu 16.04安装Oracle 11gR2入门教程图文详解

    概述 Ubuntu版本:ubuntu-16.04.3-desktop-amd64 Oracle版本:linux.x64_11gR2_database ------------------------- ...

  7. poj 2002 Squares 几何二分 || 哈希

    Squares Time Limit: 3500MS   Memory Limit: 65536K Total Submissions: 15137   Accepted: 5749 Descript ...

  8. js实现队列结构

    创建队列 let items function Queue { this.enqueue = function(element){ items.push(element) } this.dequeue ...

  9. 关于node npm的一个解决方法

    解决Error: ENOENT: no such file or directory, scandir 'D:\IdeaWork\code-front-jet\node_modules\.npmins ...

  10. VScode基础设置

    安装依赖包: • One Monokai • Aglia • One Dark Pro • Material Icon   漂亮的主题: Themes Quokka 是一个调试工具插件,能够根据你正在 ...