使用过滤器格式化数据

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';
})