一、过滤器扩展

　　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. IOS仿微信朋友圈好友展示

    前几天小伙伴要帮他做一个群聊功能,里面有好友列表,要求和微信的差不多(见下图),让小伙伴自己实现了下,他将CollectionView放在tableView的tableHead中,可是当添加好友或删除 ...

  2. SimpleCalendar日历插件改版

    先附上一张货真价实的效果图: 以上部分代码,为了适应我司项目的需求,原来插件源码大改(因为项目中下拉框用了select2,所以原来插件的下拉框就有问题了,在加上原来插件本身就有点问题,特别是农历 .节 ...

  3. 工作中，ES6 可能掌握这些就足够了

    刚开始用vue或者react,很多时候我们都会把ES6这个大兄弟加入我们的技术栈中.但是ES6那么多那么多特性,我们需要全部都掌握吗?秉着二八原则,掌握好常用的,有用的这个可以让我们快速起飞. 接下来 ...

  4. js post跳转

    function clickFunc(id) { var params = new Array(); params.push({ name: "id", value: id}); ...

  5. Metronic 对话 chat

    http://keenthemes.com/preview/metronic/theme/admin_1/index.html: jquery让滚动条默认在最底部:$('#content').scro ...

  6. Html与Css关联到一起

    在HTML文件中使用Link标签连接独立的Css文件 将Link标签放在head标签中 like标签是空标签,只写开始标签,不写结束标签 我们需要为like标签设置一些属性 type的值设置为text ...

  7. [javaSE] 多线程（守护线程）

    我们一般使用多线程,都是while的死循环,想要结束线程,只需退出死循环即可 当线程中调用了sleep()方法或者wait()方法,当前的线程就会进入冻结状态,这个线程就结束不了 调用Thread对象 ...

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

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

  9. freemarker学习笔记

    在模板中定义的变量有三种类型: 引用 1:plain变量:可以在模板的任何地方访问,包括使用include指令插入的模板,使用assign指令创建和替换. 2:局部变量:在宏定义体中有效,使用loca ...

  10. TCP/IP Socket通信demo

    一个实例通过client端和server端通讯 客户端发送:“我是客户端,请多关照” 服务端回复:“收到来自于"+s.getInetAddress().getHostName()+" ...