本篇主要介绍angular自定义的过滤器:

直接看例子:

<!DOCTYPE html>

<html ng-app="MyFilter">

<head>

  <title>13.2过滤器</title>

  <meta charset="utf-8">

  <script src="../angular.js"></script>

  <script src="script.js"></script>

  <style type="text/css">

    *{

      font-family:'MICROSOFT YAHEI';

      font-size:12px

    }

  </style>

</head>

<body>

<div ng-controller="filter">

  <span>{{title_1 | titleCase: 1 }}</span>

  <br>

  <span>{{title_2 | titleCase: 2 }}</span>

</div>

</body>

</html>
var myFilter = angular.module('MyFilter',[]);

myFilter.filter('titleCase',function(){

    var titlecase = function(title,num){

        var words = title.split(' ');

        for(var i=0; i<words.length; i++){

            words[i] = words[i].charAt(0).toUpperCase() + words[i].substring(1)

        }

        return num+'. '+words.join(' ')

    };

    return titlecase

});

myFilter.controller('filter',function($scope){

    $scope.title_1 = 'i am code bunny !';

    $scope.title_2 = 'i am white bunny !'

});

1. 首先要创建一个模块: MyFilter

2. 给模块添加一个过滤器: titleCase

创建过滤器的格式如下:

myFilter.filter('titleCase',function(){

    var titlecase = function(title,num){

         ...

    };

    return titlecase

});

.filter的第一个参数为过滤器的名字,也就是在{{}}里面使用的名字,第二个参数是一个函数,函数需要再返回一个函数,被返回的函数,就是用来处理数据的函数,第一个参数就是需要被过滤的数据,后面的参数,就是在使用过滤器的时候,冒号后面传入的值. 比如这里的1:

<span>{{title_1 | titleCase: 1 }}</span>

3. 创建控制器: filter

4. 创建变量title_1,title_2

angular学习笔记(十六) -- 过滤器(2)的更多相关文章

  1. angular学习笔记(十六) -- 过滤器(1)

    本篇主要介绍过滤器的基本用法: 过滤器用来对数据进行格式的转换,数据格式的转化与逻辑无关,因此,我们使用过滤器来进行这些操作: {{... | filter2: 参数1,参数2... }} expre ...

  2. python3.4学习笔记(十六) windows下面安装easy_install和pip教程

    python3.4学习笔记(十六) windows下面安装easy_install和pip教程 easy_install和pip都是用来下载安装Python一个公共资源库PyPI的相关资源包的 首先安 ...

  3. (C/C++学习笔记) 十六. 预处理

    十六. 预处理 ● 关键字typeof 作用: 为一个已有的数据类型起一个或多个别名(alias), 从而增加了代码的可读性. typedef known_type_name new_type_nam ...

  4. 【转】angular学习笔记(十四)-$watch(1)

    本篇主要介绍$watch的基本概念: $watch是所有控制器的$scope中内置的方法: $scope.$watch(watchObj,watchCallback,ifDeep) watchObj: ...

  5. angular学习笔记(十四)-$watch(1)

    本篇主要介绍$watch的基本概念: $watch是所有控制器的$scope中内置的方法: $scope.$watch(watchObj,watchCallback,ifDeep) watchObj: ...

  6. angular学习笔记(十五)-module里的'服务'

    本篇介绍angular中的模块:module 在笔记(二)http://www.cnblogs.com/liulangmao/p/3711047.html里已经讲到过模块,这篇主要讲模块的 '服务' ...

  7. angular学习笔记(十九)-指令修改dom

    本篇主要介绍angular使用指令修改DOM: 使用angular指令可以自己扩展html语法,还可以做很多自定义的事情.在后面会专门讲解这一块的知识,这一篇只是起到了解入门的作用. 与控制器,过滤器 ...

  8. python 学习笔记十六 django深入学习一 路由系统，模板，admin，数据库操作

    django 请求流程图 django 路由系统 在django中我们可以通过定义urls,让不同的url路由到不同的处理函数 from . import views urlpatterns = [ ...

  9. angular学习笔记(十四)-$watch(3)

    同样的例子,还可以这样写: <!DOCTYPE html> <html ng-app> <head> <title>11.3$watch监控数据变化&l ...

随机推荐

  1. C/C++程序内存分类

    程序中内存分类主要有下面几种: (1)栈存储区:主要存储局部变量.函数參数.函数返回值等. 栈内存由编译器在须要时自己主动分配,使用完后自己主动释放. (2)堆存储区:由new.malloc申请到的空 ...

  2. 关于CodeFirst的使用教程

    请参考:http://www.cnblogs.com/lxblog/archive/2013/05/22/3092428.html 很全面实用,谢谢作者的付出!

  3. 最新美行地图Z13升级攻略

    原文地址:http://bbs.gpsuu.com/read.php?tid-231134.html  2013年11月16日订车,4S答应送导航,却没有提送什么导航.12月24日提车,DVD导航一体 ...

  4. Centos7安装Openresty

    通过yum安装 在 /etc/yum.repos.d/ 下新建 OpenResty.repo 内容 [openresty] name=Official OpenResty Repository bas ...

  5. 【mysql】Innodb三大特性之adaptive hash index

    1.Adaptive Hash Indexes 定义 If a table fits almost entirely in main memory, the fastest way to perfor ...

  6. define() vs const 该如何选择？

    使用 define(),除非考虑到可读性.类常量.或关注微优化 1.在 PHP 中是使用 define() 函数来定义常量,PHP 5.3.0 以后,PHP 中也能够使用 const 关键字来声明常量 ...

  7. HDUOJ -----1686

    Oulipo Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  8. Google C++单元测试框架之宏

    一.概述 gtest中,断言的宏可以理解分为两类,一类是ASSERT系列,一类是EXPECT系列: 1.ASSERT_*系列的断言,当检查点失败时,退出当前函数(注意:并非退出当前案例) 2.EXCE ...

  9. DBA_实践指南系列10_Oracle Erp R12诊断功能Diagnostic（案例）

    2013-12-10 Created By BaoXinjian Thanks and Regards

  10. 关于Andorid的RecyclerView在V7包下找不到的解决办法

      关于Andorid的RecyclerView在V7包下找不到的解决办法 最近在学习使用RecyclerView替换现有的ListView,看了几篇文章.当准备自己动手实现的时候发现,V7包下找不到 ...