Angular过滤器

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>

 

  

posted @ 2016-11-15 17:41  大厨的笔记  阅读(275)  评论(0编辑  收藏  举报