首页 > 代码库 > Angular过滤器

Angular过滤器

2024-08-21 02:52:58   221人阅读

angular中的过滤器有：

　　currency 过滤货币

　　number  过滤数字，

　　date  过滤日期

　　json 把js对象过滤为json字符串

　　limitTo  截取字符串，参数是正数则从左往右截取，负数从末尾开始数起，没有0，从1开始

　　lowercase 把字符串转为小写

　　uppercase 把字符串转为大写

　　orderBy  根据给定的对象的属性名对对象进行排序，可以升序也可以降序 参数为 true false

　　$filter  在脚本中写过滤器

　　.filter 自定义过滤器

 

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        span{
            display:inline-block;
            font-weight:bold;
            font-size:20px;
            margin-right:10px;
        }
    </style>
    <script src="../../Angular/angular.min.js"></script>
</head>
<body>
<div ng-controller="myController">
    <p><span>currency => </span>{{123.5555555|number:1|currency:"￥"}}</p>
    <p>{{name}}</p>

    <h2>日期</h2>
    <p>{{today | date:"yyyy:MM:dd:HH:mm:ss.sss"}}</p>

    <h2>json</h2>
    <p>{{obj|json}}</p>

    <h2>limitTo</h2>
    {{arr| limitTo:-1}}

    <h2>orderBy</h2>
    <p>{{arrObj|orderBy:"name":true}}</p>

    <h2>自定义过滤器</h2>
    <p>{{"aalkdfa"|zdy}}</p>
</div>
<script>
    angular.module("myApp",[])
            .controller("myController",function($scope,$filter,$interval){
                $scope.name = $filter("uppercase")("aklkjjfhakfkha");

                //日期
                $interval(function(){
                    $scope.today = new Date();
                },1);

                //json
                $scope.obj = {
                    name:"chef",
                    age:"three"
                }

                //limilTo
                $scope.arr = ["1","3","3","8"];

                //orderBy
                $scope.arrObj = [
                    {name:"c",age:"22"},
                    {name:"w",age:"22"},
                    {name:"a",age:"22"},
                    {name:"b",age:"22"}
                ];
            })


    //自定义过滤器 input 是要过滤的字符串
            .filter("zdy",function(){
                return function(input){

                    //把第一个字符改为大写
                    return input[0] = input[0].toUpperCase()+input.slice(1);
                }
            })
</script>
</body>
</html>

 

　　

Angular过滤器


联系
我们