本篇主要介绍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. 利用Session完成用户的登录和注销

    用户的登录和注销是最常见的Web应用案例,当一个应用的客户登录了以后,其他所有的会话都得知道这个用户已经登录还很有可能得提取用户的昵称予以显示等等,所以,只有把登录成功的用户的信息放入到Session ...

  2. android 使用AsyncHttpClient框架上传文件以及使用HttpURLConnection下载文件

    AsyncHttpClient开源框架android-async-http还是非常方便的. AsyncHttpClient该类通经常使用在android应用程序中创建异步GET, POST, PUT和 ...

  3. acm2024

    /**  * C语言合法标识符  */ import java.util.*; public class acm2024 { public static void main(String[] args ...

  4. HTML解析模块

    import html html.escape(s, quote=True) 对特殊字符进行转义 Convert the characters &, < and > in stri ...

  5. ubuntu移植jsoncpp到Android平台(转）

    NDK开发模块的时候,如果涉及到网络请求,类似json数据传递的时候,有现成的第三方json库可以移植,后台C++开发中使用的比较多的是jsoncpp,今天记录一下jsoncpp移植到Android平 ...

  6. Unix 网络编程 读书笔记1

    第一章: C/C++语言提供两种不同的编程模式:IPL32和PL64.► IPL32 ● 表示integer/pointer/long三种数据类型是32位(4个字节),在这种模式下,提供32位的地址空 ...

  7. Web Service-WSDL详解

    WSDL指网络服务描述语言 (Web Services Description Language), 是一种用XML编写的文档, 用于描述Web Service和函数.参数以及返回值等; 文档内规定了 ...

  8. 用JS实现任意导航栏的调用

    首先设计一个关于导航的层叠样式表如:body{font-size:12px;font-family:Arial,Helvetica,'宋体',sans-serif;color:#333;backgro ...

  9. 【LeetCode】79. Word Search

    Word Search Given a 2D board and a word, find if the word exists in the grid. The word can be constr ...

  10. 房产地图google map的初步应用点滴.1)(转)

    房产地图google map的初步应用点滴.1)房产地图google map的初步应用点滴.2)房产地图google map的初步应用点滴.3) 房产地图google map的初步应用点滴.4) 以前 ...