angular学习笔记(十六) -- 过滤器(2)
本篇主要介绍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)的更多相关文章
- angular学习笔记(十六) -- 过滤器(1)
本篇主要介绍过滤器的基本用法: 过滤器用来对数据进行格式的转换,数据格式的转化与逻辑无关,因此,我们使用过滤器来进行这些操作: {{... | filter2: 参数1,参数2... }} expre ...
- python3.4学习笔记(十六) windows下面安装easy_install和pip教程
python3.4学习笔记(十六) windows下面安装easy_install和pip教程 easy_install和pip都是用来下载安装Python一个公共资源库PyPI的相关资源包的 首先安 ...
- (C/C++学习笔记) 十六. 预处理
十六. 预处理 ● 关键字typeof 作用: 为一个已有的数据类型起一个或多个别名(alias), 从而增加了代码的可读性. typedef known_type_name new_type_nam ...
- 【转】angular学习笔记(十四)-$watch(1)
本篇主要介绍$watch的基本概念: $watch是所有控制器的$scope中内置的方法: $scope.$watch(watchObj,watchCallback,ifDeep) watchObj: ...
- angular学习笔记(十四)-$watch(1)
本篇主要介绍$watch的基本概念: $watch是所有控制器的$scope中内置的方法: $scope.$watch(watchObj,watchCallback,ifDeep) watchObj: ...
- angular学习笔记(十五)-module里的'服务'
本篇介绍angular中的模块:module 在笔记(二)http://www.cnblogs.com/liulangmao/p/3711047.html里已经讲到过模块,这篇主要讲模块的 '服务' ...
- angular学习笔记(十九)-指令修改dom
本篇主要介绍angular使用指令修改DOM: 使用angular指令可以自己扩展html语法,还可以做很多自定义的事情.在后面会专门讲解这一块的知识,这一篇只是起到了解入门的作用. 与控制器,过滤器 ...
- python 学习笔记十六 django深入学习一 路由系统，模板，admin，数据库操作
django 请求流程图 django 路由系统 在django中我们可以通过定义urls,让不同的url路由到不同的处理函数 from . import views urlpatterns = [ ...
- angular学习笔记(十四)-$watch(3)
同样的例子,还可以这样写: <!DOCTYPE html> <html ng-app> <head> <title>11.3$watch监控数据变化&l ...
随机推荐
- poj 1286 Necklace of Beads & poj 2409 Let it Bead(初涉polya定理)
http://poj.org/problem?id=1286 题意:有红.绿.蓝三种颜色的n个珠子.要把它们构成一个项链,问有多少种不同的方法.旋转和翻转后同样的属于同一种方法. polya计数. 搜 ...
- Python之os.walk()
#http://www.cnblogs.com/bluescorpio/archive/2009/10/21/1587493.html os.walk() 返回结果:可以得到一个(dirpath, d ...
- eclipse下使用cygwin的方法（Windows下用eclipse玩gcc/g++和gdb）
明天就回国了,今晚回国前写写如何配置eclipse和CDT.这个配置方法网上讨论不是很多,可能用的人少,毕竟Windows上写C++程序多数喜欢VS,即使写的是Linux程序,很多人仍然会用VS(说只 ...
- [手把手教程][JavaWeb]优雅的SpringMvc+Mybatis整合之路
来源于:http://www.jianshu.com/p/5124eef40bf0 [手把手教程][JavaWeb]优雅的SpringMvc+Mybatis整合之路 手把手教你整合最优雅SSM框架:S ...
- 基于docker的centos:latest镜像制作nginx的镜像
Dockerfile和nginx.repo在同一目录下 先创建nginx.repo [root@localhost nginx]# cat nginx.repo [nginx] name=nginx ...
- UpdatePanel的用法详解
摘自:http://www.cnblogs.com/shangxia/articles/2281782.html 一.UpdatePanel的结构 <asp:ScriptManager ID=& ...
- request.getcontextPath() 详解(转)
本文转自:http://blog.csdn.net/pengxuan/article/details/6604578 <%=request.getContextPath()%>是为了解决相 ...
- HDUOJ--Holding Bin-Laden Captive!
Holding Bin-Laden Captive! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Ja ...
- HDUOJ-Counting Triangles
Counting Triangles Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...
- 两个有序数组求中位数log(m+n)复杂度
leetcode 第4题 中位数技巧: 对于长度为L的有序数组,它的中位数是(a[ceil((L+1)/2)]+a[floor((L+1)/2)])/2 算法原理: 类似三分法求极值 两个人都前进,谁 ...