angular----过滤器格式化数据
你可以用过滤器来声明应该如何变换数据格式,然后再显示给用户,你只要在模板中使用一个差值变量即可。使用过滤器的语法是:
{{expression | filterName : parameter1 : ...parameterN}}
这里的表达式可以是任意的Angular表达式,filterName是你需要使用的过滤器名称,过滤器的多个参数之间使用冒号隔开。这些参数自身也可以是任何合法的angular表达式。
Angular 内置了很多过滤器,如currency、data、number、uppercase等。
----------------------------------------------------------------------------------------------------------------------------------------------
如:
{{12.9 | currency}}显示的结果是:
$12.9
----------------------------------------------------------------------------------------------------------------------------------------------
如:
{{12.9 | currency | number:0}}
显示的结果是:
$13
----------------------------------------------------------------------------------------------------------------------------------------------
自定义过滤器:
自己也可以编写过滤器。例如,如果我们需要为标题文字创建首字母大写的字符串,可以像下面这样:
var homeModule=angular.module('homeModule',[]); // 自定义过滤器--titleCase homeModule.filter('titleCase',function(){ var titleCaseFilter = function(input){ // 将输入在空格处分隔开,转化为数组words var words = input.split(' '); // 此时words=['behold','the','majesty','of','your','page','title']; for(var i=0,len=words.length;i<len;i++){ // slice获取words[i]除首字母之外的字符 words[i] = words[i].charAt(0).toUpperCase()+words[i].slice(1) } // 将words数组转化为字符串,此时words='Behold The Majesty Of Your Page Title' return words.join(' '); }; return titleCaseFilter; });对应的模板如下:
<div ng-controller="homeContrl"> <h1>{{Heading | titleCase}}</h1> </div>然后通过控制器把pageHeading作为一个模型变量插入进去:
homeModule.controller('homeContrl',function($scope){ $scope.Heading = 'behold the majesty of your page title'; })