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 ...
随机推荐
- VB中如何修改treeview的背景色
改变 TreeView 的背景 Private Declare Function SendMessage Lib "User32" Alias "SendMessa ...
- java 获取昨天日期
Calendar cal=Calendar.getInstance(); cal.add(Calendar.DATE,-1); Date d=cal.getTime(); SimpleDateForm ...
- eclipse 如何修改maven插件本地仓库jar包默认存储位置
eclipse 如何修改maven插件本地仓库jar包默认存储位置 CreateTime--2018年4月18日11:04:47 Author:Marydon 1.更改eclipse的maven本 ...
- 去除DataTable重复数据的三种方法（转）
转自:https://www.cnblogs.com/sunxi/p/4767577.html 业务需求 最近做一个把源数据库的数据批次导出到目标数据库.源数据库是采集程序采集而来的原始数据库,所以需 ...
- Loadrunner脚本回放 场景运行过程中常见错误分析
问题一:Loadrunner超时错误问题描述 Loadrunner超时错误:在录制Web协议脚本回放时超时情况经常出现,产生错误的原因也有很多,解决的方法也不同. 问题现象Error -27728: ...
- Spring框架文档与API（4.3.6版本）
http://docs.spring.io/spring/docs/current/spring-framework-reference/htmlsingle/ Table of Contents I ...
- NSURLRequestCachePolicy 缓存策略
1> NSURLRequestUseProtocolCachePolicy = 0, 默认的缓存策略, 如果缓存不存在,直接从服务端获取.如果缓存存在,会根据response中的Cache-Co ...
- 简单的WPS二次开发脚本
详细信息见:http://bbs.wps.cn/thread-22427301-1-1.html 下载:WPS2013专业版:WPS2013Pro_normal.exe 调用脚本(xl.vbs)内容如 ...
- DBA_实践指南系列9_Oracle Erp R12应用补丁AutoPatch/AutoControl/AutoConfig（案例）
2013-12-09 Created By BaoXinjian
- Error parsing XML: not well-formed (invalid token) 报错
鼠标右键选择Source然后再选Format 就可以解决此问题