angular过滤器

当前位置:我的异常网» JavaScript » 6-Angular的内置过滤器跟自定义过滤器

6-Angular的内置过滤器跟自定义过滤器

www.MyException.Cn  网友分享于:2015-11-23  浏览:0次
 
6-Angular的内置过滤器和自定义过滤器

在实际的开发过程中,很多後端返回给我们的数据都是需要格式化处理的,在angular中为我们内置提供了filter指令,可以很方便的对数据进行处理。首先我们看看在视图中是如何使用过滤器的。

1、currency(货币)格式化

<div ng-controller="Aaa">
    <p>{{name | currency:'¥'}}</p>
</div>

<script type="text/javascript">
    var m1 = angular.module('myApp',[]);
    m1.controller('Aaa',['$scope',function($scope){
        $scope.name = '12334.273489274834';
    }]);
</script>

在name的数据後面使用|符号表示启用过滤器,如果对linux比较熟悉的话,这块的|根linux的管道功能。currency可以理解成函数,而'¥'则是函数的参数,如果不传默认为$符号!

2、number(数字)格式化

<div ng-controller="Aaa">
    <p>{{name | number:2}}</p>
</div>
<script type="text/javascript">
    $scope.name = '12334.273489274834';
</script>

用来精确浮点数(精确到2位)默认是3位。

3、uppercase , lowercase(大小写)格式化

<div ng-controller="Aaa">
    <p>{{name | uppercase}}</p>
</div>
<script type="text/javascript">
    var m1 = angular.module('myApp',[]);
    m1.controller('Aaa',['$scope',function($scope){
        $scope.name = 'hello';
    }]);
</script>

uppercase转换成大写,lowercase转换成小写

4、json(数据)格式化

<div ng-controller="Aaa">
    <pre>{{name | json}}</pre>
</div>
<script type="text/javascript">
    var m1 = angular.module('myApp',[]);
    m1.controller('Aaa',['$scope',function($scope){
        $scope.name = { name : 'xcg',age : 19 };
    }]);
</script>

以json的格式输出到页面中,视图只能使用pre标签才可以识别

5、limitTo(截取)格式化

<div ng-controller="Aaa">
    <p>{{name | limitTo : 3}}</p>
</div>
<script type="text/javascript">
    var m1 = angular.module('myApp',[]);
    m1.controller('Aaa',['$scope',function($scope){
        $scope.name = '123456789';
    }]);
</script>

截取字符串,数字不行。。。

6、limitTo(截取)格式化

<div ng-controller="Aaa">
    <p>{{name | date : 'yyyy-MM-dd hh:mm:ss'}}</p>
  <p>{{name | date : 'MM/dd/yyyy @ h:mma'}}</p> </div> <script type="text/javascript"> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope',function($scope){ $scope.name = 1448022616463; }]); </script>

7、orderBy(排序)格式化

<div ng-controller="Aaa">
    <pre>{{name | orderBy : 'age' : true | json}}</pre>
<div>
<script type="text/javascript">
    var m1 = angular.module('myApp',[]);
    m1.controller('Aaa',['$scope',function($scope){
        $scope.name = [
            {color : 'red',age : '10'},
            {color : 'yellow',age : '20'},
            {color : 'blue',age : '30'},
            {color : 'green',age : '40'}
        ];
    }]);
</script>

如果排序的值是字母,就按照字母的顺序来排序。如果是数字,从大到小。传入true则为逆向排序。

8、filter(筛选&过滤)格式化

<div ng-controller="Aaa">
   <pre>{{name | filter : 'l' | json}}</pre>
</div>
<script type="text/javascript">
    var m1 = angular.module('myApp',[]);
    m1.controller('Aaa',['$scope',function($scope){
        $scope.name = [
            {color : 'red',age : '10'},
            {color : 'yellow',age : '20'},
            {color : 'blue',age : '30'},
            {color : 'green',age : '40'}
        ];
    }]);
</script>

在filter传入'l',会筛选出blue以及yellow。

<pre>{{name | filter : 'yellow' : true | json}}</pre> 如果像这样再传入true,就必须保证value的完整性,单单的'l'是无法筛选出来的。

上面都是在视图中以表达式的形式使用过滤器,下面我们来看看在JS中使用过滤器。

<div ng-controller="Aaa">
    <p>{{currency}}</p>
    <p>{{number}}</p>
    <p>{{uppercase}}</p>
    <pre>{{json}}</pre>
    <p>{{limitTo}}</p>
    <p>{{date}}</p>
    <pre>{{orderBy}}</pre>
    <pre>{{filter}}</pre>
</div>
<script type="text/javascript">

var m1 = angular.module('myApp',[]);

m1.controller('Aaa',['$scope','$filter',function($scope,$filter){
    var colors = [{color : 'red',age : '10'},
            {color : 'yellow',age : '20'},
            {color : 'blue',age : '30'},
            {color : 'green',age : '40'}];

    $scope.currency = $filter('currency')(12334.273489274834,'¥');
    $scope.number = $filter('number')('12334.273489274834',2);
    $scope.uppercase = $filter('uppercase')('hello');
    $scope.json = $filter('json')({ name : 'xcg',age : 19 });
    $scope.limitTo = $filter('limitTo')('xiecg',2);
    $scope.date = $filter('date')('1448106268837','yyyy-MM-dd hh:mm:ss');
    $scope.orderBy = $filter('orderBy')(colors,'age',true);
    $scope.filter = $filter('filter')(colors,'l');
}]);

</script>

这些都属于内置过滤器,我们还可以用.filter自定义过滤器。

<div ng-controller="Aaa">
    <p>{{name | firstUpper : 2}}</p> 
</div>
<script type="text/javascript">

var m1 = angular.module('myApp',[]);

//自定义过滤器
m1.filter('firstUpper',function(){
    return function(str,num){
        console.log(num); //2,得到传递的参数
        return str.charAt(0).toUpperCase() + str.substring(1);
    }
});

m1.controller('Aaa',['$scope','$filter',function($scope,$filter){
    $scope.name = 'hollo';
}]);

</script>

这里我们自定义了一个首字母大写的方法,例子是在视图中使用的,也可以在JS中使用过滤器。

原文地址:https://www.cnblogs.com/wcLT/p/7083556.html