本篇主要介绍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. OPENCV 常用函数

    1.cvCloneImage: IplImage* cvCloneImage( const IplImage* image ); 在使用函数之前,不用特地开辟内存,即该函数会自己开一段内存,然后复制好 ...

  2. eclipse导入web项目各种错误

    1.JavaWeb:报错信息The superclass "javax.servlet.http.HttpServlet" was not found on the Java Bu ...

  3. 基于apktool项目的android批量打包工具，多平台支持

    好久木有写博客了,今天有点兴致就写一下,献上一个没怎么用的批量打包工具,python实现的,虽然说现在android的批量打包有一个很好的工具可以使用gradle,这个灰常牛叉的工具和android ...

  4. lftp mirror 上传目录

    1. lftp的确很强大, 要学习一下.       sudo yum install lftp       (测试了一下,ftp软件才92K,lftp有2.3M) 2. lftp mirror 能上 ...

  5. idea 设置黑色背景

      idea 设置黑色背景 CreateTime--2018年4月26日10:32:38 Author:Marydon 设置-->Appearance-->Theme调为:Darcula- ...

  6. Android WiFi开发

    概述 介绍Android WiFi的扫描.连接.信息.以及WiFi热点等等的实现,并用代码实现. 详细 代码下载:http://www.demodashi.com/demo/10660.html 一. ...

  7. ELK日志分析平台搭建全过程

    一.使用背景 当生产环境有很多服务器.很多业务模块的日志需要每时每刻查看时 二.环境 系统:centos 6.5 JDK:1.8 Elasticsearch-5.0.0 Logstash-5.0.0 ...

  8. useradd或者userdel相关用户管理命令不好用

    前言 有时使用useradd或者userdel会出现如下报错: userdel: cannot open /etc/passwd 很明显是/etc/passwd文件导致的 一.查看以及改变文件状态 [ ...

  9. 开发完 iOS 应用，接下去你该做的事

    iOS专项总结 一个应用经过多次迭代后告一段落,接下去我们在技术上还可以做些什么呢?答案是提高代码的整体质量.关于这方面,除了我们常喊的 重构,测试也非常重要. 博主近期给我们的 iOS客户端代码来了 ...

  10. Oracle自定义函数和存储过程示例，自定义函数与存储过程区别

    参考资料:http://www.newbooks.com.cn/info/60861.html oracle自定义函数学习和连接运算符(||) 贴一段中文文档示例,应该就可以开始工作了: --过程(P ...