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 ...
随机推荐
- CSS3 选择器浏览器兼容性汇总 IE8
1.css选择器 css(包括css1.css2和css3)有哪些选择器? http://www.w3school.com.cn/cssref/css_selectors.asp 2.CSS3选择器 ...
- 解决vsftpd乱码
不管是中文环境还是英文环境,需要改的地方如下: /etc/sysconfig/i18n 其内容改为: LANG="zh_CN.GB2312"SYSFONT="latarc ...
- openerp 7.0 来自外部的邮件会发送二次问题解决方法
插入代码:\addons\mail\mail_mail.py #309 line this = self.pool.get('res.users').browse(cr, uid, uid, cont ...
- exception PLS-00103: Encountered the symbol "(" when expecting one of the following:
exception PLS-00103: Encountered the symbol "(" when expecting one of the following: Cre ...
- COCOS学习笔记--粒子系统
一．粒子系统的简单介绍 粒子系统是指计算机图形学中模拟特定现象的技术,它在模仿自然现象.物理现象及空间扭曲上具备得天独厚的优势,为我们实现一些真实自然而又带有随机性的特效(如爆炸.烟花.水流)提供了方 ...
- 使用JDK自带的Stax操作XML
操作的books.xml <?xml version="1.0" encoding="UTF-8"?> <bookstore> < ...
- java中的finally详解(finally中没有return i，却有i=XX）
问题分析 首先来问大家一个问题:finally 语句块一定会执行吗? 很多人都认为 finally 语句块是肯定要执行的,其中也包括一些很有经验的 Java 程序员.可惜并不像大多人所认为的那样,对 ...
- leetcode719:直线上的第k近点对
问题描述 给定数组a[N],可以确定C(N,2)个点对,也就确定了C(N,2)个距离,求这些距离中第k小的距离(k<C(N,2)). 思路 看到第k小.第k大这种问题,首先想到二分法. 把求值问 ...
- PHP5.5新特性
详情见:http://www.php.net/manual/zh/migration55.new-features.php 1. 生成器 yield关键字 yield的中文文档在这里:http://p ...
- Java虚拟机学习 - 对象引用强度 ( 8 )
无论是通过计数算法判断对象的引用数量,还是通过根搜索算法判断对象引用链是否可达,判定对象是否存活都与“引用”相关. 引用主要分为 :强引用(Strong Reference).软引用(Soft Ref ...