<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body ng-app="myApp"> <div ng-controller="firstController"> {{name | uppercase}} <!--转换大写--> <br> {{name1 | lowercase }} <!--转换小写--> <br> {{time | date:"yyyy-MM-dd hh:mm:ss" }} <br> {{120 | currency}} <!--美元格式化--> {{120 | currency:"¥"}} <!--中文格式化--> <br> {{123123123 | number }} <!--格式化数字--> <br> {{1.23123123 | number:"1" }} <!--保留小数点--> <br> {{[{name:"tanxu",age:11},{name:"张三",age:21},{name:"李四",age:31}] | filter:{name:"张三"} }} <!--filter过滤--> <br> {{"我是一个中国人" | limitTo:2 }} <!--litmitTo截取多少位数--> {{"huahuusdf" | limitTo:-2 }} <!--从后面向前面截取2位--> <br> {{[{name:"tanxu",age:31},{name:"张三",age:21},{name:"李四",age:11}] | orderBy :'age'}} <!--对age进行排序--> <!--自定义过滤器的使用--> <br> {{"hi,tanxu" | myFilter:0:2 }} <!--传入多个参数--> <!--引入外部的模块定义的过滤器,,先引入js文件,再加模块依赖--> <br> {{"hi,中国" | myFilter1:0:5 }} </div> </body> <script src="angular/angular.js"></script> <script src="filter.js"></script> <script type="text/javascript"> var app=angular.module("myApp",['filterModule']); app.controller('firstController',function($scope,$filter){ $scope.name="tanxu"; $scope.name1="TANXU"; $scope.time="1234234234"; $scope.name3=$filter('uppercase')($scope.name); /*利用js的方式去过滤 ,注意:需要注入$filter服务才可以用*/ console.log($scope.name3); }); /*自定义过滤器---注意:在module中定义*/ app.filter('myFilter',function(){ return function(input,n1,n2){ return input.replace(/hi/,"你好").substring(n1,n2); /*定义一个自定义的过滤器,实现向替换hi为你好,接着截取n1-n2的字符串进行返回*/ } }) </script> </html>
在另一个过滤器模块中存放自定义过滤器
/** * Created by Administrator on 2016/3/28. */ /*将各种过滤器定义为一个模块*/ var filter=angular.module('filterModule',[]); filter.filter('myFilter1',function(){ return function(input,n1,n2){ return input.replace(/hi/,"你好").substring(n1,n2); /*定义一个自定义的过滤器,实现向替换hi为你好,接着截取n1-n2的字符串进行返回*/ } })