本篇主要介绍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. win7系统下用vspd软件进行串口编程实例

    http://blog.csdn.net/qiusuo800/article/details/8299777 目前,我在学习C#串口编程类的基础知识,在网上也找了一些资料,但都存在一些问题,现在他们基 ...

  2. QT内label控件通过opencv显示图像

    1.对pro进行配置.使其可以理解opencv. INCLUDEPATH+=d:\opencv249\include\opencv\ d:\opencv249\include\opencv2\ d:\ ...

  3. Eclipse 如何创建Web项目

      Eclipse 如何创建Web项目 CreateTime--2018年3月8日16:43:33 Author:Marydon 第一步: 右键-->New-->Dynamic Web P ...

  4. SettingsMyEclipse

      迁移时间--2017年5月20日10:39:42 Author:Marydon-----------------------------------MyEclipse单独设置项---------- ...

  5. Asp.net Mvc (Filter及其执行顺序)

    应用于Action的Filter 在Asp.netMvc中当你有以下及类似以下需求时你可以使用Filter功能判断登录与否或用户权限,决策输出缓存,防盗链,防蜘蛛,本地化设置,实现动态Actionfi ...

  6. 在notepad++中运行python代码

    #在notepad++中运行python代码 ''' 1.安装插件pyNPP, 2.允许插件pyNPP中的第一个和第二个选项即可,如果代码过少代码执行一闪而过,可能无法看到,可加入少量sleep时间即 ...

  7. FCT需求分析

    1. 系统组成 系统从硬件角度看是由芯片.电源,时钟,总线组成, 当中总线分为控制总线和数据总线. 芯片是单个的硬件单元,可实现多种功能.有些功能有性能需求,在计算机系统中大部分功能都须要软件配合. ...

  8. （一）Linux实操之——权限、任务调度、磁盘分区

    1. 权限 1.1 查看权限 通过ls -l命令可以看到文件的详细信息 下面以一条信息解释各个位置字符的作用 -rwxr--r--. 1 root root 32 6月 18 10:15 choose ...

  9. 小白心目中的Java抽象类(abstract class)

    在java开发中,我们有时会定义了一个父类,这个父类只有对方法的描述,但却没有在父类中写出对方法的实现,这种被定义的方法称为抽象方法.那么理所当然,含有抽象方法的类就称为抽象类.用关键字abstrac ...

  10. mysql中的慢查询日志

    首先我们看一下关于mysql中的日志,主要包含:错误日志.查询日志.慢查询日志.事务日志.二进制日志: 日志是mysql数据库的重要组成部分.日志文件中记录着mysql数据库运行期间发生的变化:也就是 ...