Angular过滤器

最新推荐文章于 2025-09-05 11:22:47 发布

转载最新推荐文章于 2025-09-05 11:22:47 发布 · 83 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/chefweb/p/6066630.html

文章标签：

#javascript #json #ViewUI

本文介绍了Angular中的各种内置过滤器，包括货币、数字、日期、JSON转换等，并展示了如何使用这些过滤器来处理数据。此外，还讲解了如何创建自定义过滤器以满足特定需求。

angular中的过滤器有：

　　currency 过滤货币

　　number 过滤数字，

　　date 过滤日期

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

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

　　lowercase 把字符串转为小写

　　uppercase 把字符串转为大写

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

　　filter 根据参数过滤数组或者对象，如果参数是一个字符串，那么可以过滤出数组中包含这个字符串的元素。

　　$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>