小人儿的笔记（AngularJS）--04

2024-04-27 15:08:02

字体：大中小

来源：转载

供稿：网友

过滤器

1.用于将数据格式化后展现； 2.AngularJS内置多个过滤器，并支持自定义； 3.可以用在视图模板(templates)、指令（directives）、控制器(controllers)或者服务(services)中； 4.在视图模板或指令中使用运算符“|”添加过滤器； 5.在控制器或服务中使用$filter；

Angular共内置了9种过滤器，分别是

货币currency : 用于以货币形式显示数据，默认以$为货币符号，保留小数点后2位，可以指定货币符号和保留位数，参数顺序不能颠倒，自动四舍五入；如：{{num | currency:'￥':3}}数字number : 用于保留小数位数，自动四舍五入；日期date： Date类型数据默认输出为与基准时间相差毫秒数预定义格式：short、medium、shortDate、 mediumDate（默认格式）、longDate、fullDate、shortTime、mediumTime自定义格式：使用字母y、M、d、h/H、m、s、E等自由组合如： <h1>{{now | date:"yyyy-MM-dd HH:mm:ss"}}</h1>

字符串大小写lowercase和uppercase

个数限制limitTo

用于截取部分字符串或数组，参数为正数表示截取开始部分，负数表示截取结尾部分；当参数超出数据长度，则返回原始数据；当有两个参数时，第一个代表截取的长度，第二个代表索引；如： <h1>limitTo:2:3 :{{str | limitTo:5:3}}</h1> <h1>limitTo:-2:-3 :{{str | limitTo:-5:-3}}</h1>JSON格式化json 用于将JSON对象或javaScript对象转换为JSON格式字符串；数据筛选filter数据排序orderBy

过滤器在视图层的用法

<h1>{{123.3445 | number:3 | currency:'￥'}}</h1><h1>{{123.3445 | currency:'￥':3 | number :2}}</h1>

过滤器在控制器层的用法

例：

<div ng-controller="FilterController"> <h2>{{num}}</h2> <h2>{{str}}</h2> </div>法1：angular.module('myApp', []).controller(//在定义控制器时，将过滤器注入，格式为：过滤器名Filter；//注入的过滤器作为函数使用，第一个参数为要过滤的数据，后面依次为过滤器所需参数； 'FilterController', ['$scope','currencyFilter','lowercaseFilter', function($scope,cf,lcf){ $scope.str=lcf("Hello World"); $scope.num=cf(123.456789,'￥',3);}])法2：.controller(//当需要注入的过滤器较多时，也可以注入$filter服务，然后使用：$ft(“过滤器名”)(参数列表)；如此处的str需要经过两层过滤。 'FilterController', ['$scope','$filter', function($scope,$filter){ var tmp=$filter("number")(123.3445,3); $scope.str=$filter("currency")(tmp,"￥");}]);

上一篇：倒计时

下一篇：Javascript闭包