codecamp

AngularJS Filters

本文将简单介绍AngularJS中的filter组件,即AngularJS的过滤器。

在正文之前,先来回顾一下ng中的一些基本概念:

  • module,代码的组织单元,其它东西都是在具体的模块中定义的
  • app,业务概念,可能会用到多个模块
  • service,仅在数据层面实现特定业务功能的代码封装
  • controller,与DOM结构相关联的东西,既是一种业务封装概念,又体现了项目组织的层级结构
  • filter,改变输入数据的一种机制
  • directive,与DOM结构相关联的、特定功能的封装形式

过滤器Filter的自定义是最简单的,就是一个函数,接受输入,然后返回结果。在考虑过滤器时,我觉得很重要的一点:无状态

具体来说,过滤器就是一个函数,函数的本质含义就是确定的输入一定得到确定的输出。虽然filter是定义在module当中的,而且filter又是在controller的DOM范围内使用的,但是,它和具体的modulecontroller$scope这些概念都没有关系(虽然在这里你可以使用js的闭包机制玩些花样),它仅仅是一个函数,而已。换句话说,它没有任何上下文关联的能力。

下面是一个简单点例子:


var app = angular.module('Demo', [], angular.noop);
app.filter('map', function(){
    var filter = function(input){
      return input + '...';
    };
    return filter;
});

当有多个参数时,html中使用:来分割,形如:
data|map2:province:city



AngularJS中使用Directive、Controller、Service
AngularJS的scope.$apply
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }