angular的过滤器

最新推荐文章于 2018-11-15 15:35:05 发布

发疯的man

最新推荐文章于 2018-11-15 15:35:05 发布

阅读量508

点赞数

分类专栏： angularJS 文章标签： angular html

本文链接：https://blog.csdn.net/lzh657083979/article/details/78155066

版权

angularJS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="angular.js"></script>
    <script type="text/javascript" src="过滤器.js"></script>
</head>
<body ng-app="App">
    <div ng-controller="democontroller">
        <!-- //数字过滤器，默认会把数字三个三个隔开 1,234,567-->
        {{1234567 | number}} <br>
        <!-- //数字过滤器，后面的三是保留三个小数 1,234,567.000-->
        {{1234567 | number:3}}<br>

        <!-- //数字过滤器，数字格式 $1,234,567.00  ,还可以在后面追加-->
        {{1234567 | currency | number:3}}<br>
        <!-- //数字过滤器，数字格式自定义 ￥1,234,567.00-->
        {{1234567 | currency:'￥'}}<br>

        <hr>
        <!-- "2017-10-03T07:42:31.711Z" -->
        默认：{{today}}<br>
        <!-- Oct 3, 2017 3:49:44 PM -->
        medium:{{today | date:'medium'}}<br>
        <!-- 10/3/17 3:49 PM -->
        short:{{today | date:'short'}}<br>
        <!-- Tuesday, October 3, 2017 -->
        fullDate:{{today | date:'fullDate'}}<br>
        <!-- October 3, 2017 -->
        longDate:{{today | date:'longDate'}}<br>
        <!-- Oct 3, 2017 -->
        mediumDate:{{today | date:'mediumDate'}}<br>
        <!-- 10/3/17 -->
        shortDate:{{today | date:'shortDate'}}<br>
        <!-- 3:49:44 PM -->
        meduiTime:{{today | date:'mediumTime'}}<br>
        <!-- 3:49 PM -->
        shortTime:{{today | date:'shortTime'}}<br>

        <br>
        <!-- 2017-10-3 15:59:50 -->
        {{today |date: 'y-M-d H:m:s'}}
        <hr>
        <!-- [2,3,4,5,6] 5表示显示几个数字，1表示从第几个开始-->
        {{[1,2,3,4,5,6,7,8,9] | limitTo:5:1}}<br>
        <!-- [4,5,6,7,8] 表示从后面开始查-->
        {{[1,2,3,4,5,6,7,8,9] | limitTo:-5:-1}}<br>
        <!-- HELLO 大小写转换-->
        {{'hello' | uppercase}}<br>
        <!-- hello -->
        {{'HELLO' | lowercase}}<br>

        <hr>
        <!-- [{"name":"shanghai","age":12}] 过滤包含上海的数据-->
        {{data | filter : 'shanghai'}}<br>

        <!-- [{"name":"zhengzhou","age":33},{"name":"hangzhou","age":45},{"name":"shanghai","age":122}]    按照age的大小排序 age前面加-号说明是从大到小的顺序排列 -->
        {{data | orderBy:'-age' }}<br>
        <!-- [{"name":"shanghai","age":122}] -->
        {{data | filter: checkName }}<br>
    </div>  
</body>
</html>

var app=angular.module("App",[]);
app.factory("data",function(){
    return [{
            name:"shanghai",
            age:122
            },{
            name:"zhengzhou",
            age:33
            },{
            name:"hangzhou",
            age:45
            }]
})
app.controller("democontroller",function($scope,data,$filter){
    $scope.data=data;
    $scope.today=new Date();
    /*在js里面如何用过滤器，先注入$filter这个对象，然后后面跟上过滤类型，后面再加上参数，返回一个值*/
    var num=$filter("json")(data);
    /*console.log(num)*/
    自定义过滤器，obj是页面的参数，然后对他进行过滤。ok的话就返回true
    $scope.checkName=function(obj){
        if(obj.age>50){
            return true;
        }
        return false;
    }
})