angularjs学习第二天笔记---过滤器

　您好，我是一名后端开发工程师，由于工作需要，现在系统的从0开始学习前端js框架之angular，每天把学习的一些心得分享出来，如果有什么说的不对的地方，请多多指正，多多包涵我这个前端菜鸟，欢迎大家的点评与赐教。谢谢！

　　第二天，几天主要学angularjs中的过滤器

　　一、简介

　　angular js 的过滤器简单的理解就是格式化数据，当数据格式不满足要求时不会报错，直接展示空

　　angularjs内置了一些常用的过滤器，当然也可以根据需要自定义过滤器

　　二、过滤器的使用方式有两种：

　　　　1、在html中模板数据绑定内使用：

　　　　　　其使用方式是：在绑定模板中通过符号“|”来调用过滤器，格式为：{名称|过滤器名称}}
　　　　　　如果有多个过滤器，那么不同的过滤器间也同样通过符号“|”相连接
　　　　　　每一个过滤器还可以添加约束条件，约束条件通过符号“:”构成，多个约束条件同样用“:”相连接。
　　　　　　{名称|过滤器1：约束条件1：约束条件2|过滤器2:约束条件....}}

　　　　2、在js中通过$filter来调用：

　　　　　　其使用格式为$filter("过滤器名称:约束：约束|过滤器2:约束.....")

　　　　3、小练习

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

</head>

<body ng-app="myApp">

    <div ng-controller="myContro">

        <h1>angular js 之过滤器</h1>

        <div>angular js 的过滤器简单的理解就是格式化数据，当数据格式不满足要求时不会报错，直接展示空<br />

         angularjs内置了一些常用的过滤器，当然也可以根据需要自定义过滤器

       </div>

        <div>

            过滤器的使用方式有两种：<br />

            <h4>在html中模板数据绑定内使用：</h4><br />

            其使用方式是：在绑定模板中通过符号“|”来调用过滤器，格式为：{名称|过滤器名称}}<br />

            如果有多个过滤器，那么不同的过滤器间也同样通过符号“|”相连接<br />

            每一个过滤器还可以添加约束条件，约束条件通过符号“:”构成，多个约束条件同样用“:”相连接。<br />

            {名称|过滤器1：约束条件1：约束条件2|过滤器2:约束条件....}}

            <h4>在js中通过$filter来调用：</h4><br />

            其使用格式为$filter("过滤器名称:约束：约束|过滤器2:约束.....")

        </div>

        <div>

            <h3>下面通过一个大小写转换的例子来进行练习</h3>

            <h4>过滤器的两种使用方式</h4>

            <div>账号：<input type="text" ng-model="user.acount" placeholder="请输入账号信息..."/></div>

            <div>html模板中通过过滤器转为大写:{{user.acount|uppercase}}</div>

            <div>js代码通过$filter调用转化为小写{{user.acountL}}</div>

            <h4>过滤器添加约束条件</h4>

            <div>体重：<input type="text" ng-model="user.weight" placeholder="请输入体重，保留两位有效数字"></div>

            <div>对体重添加数字过滤器，并且结果展示两位小数：{{user.weight|number:2}}</div>

        </div>

    </div>

</body>

</html>

<script src="../Scripts/angular.js"></script>

<script type="text/javascript">

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

    myApp.controller("myContro", function ($scope, $filter) {

        $scope.user = {

            acount:"",

            acountL:""

        }

        $scope.nowDate = new Date();

        ///// 对模型数据user.acount添加一个侦听其改变

        $scope.$watch("user.acount", function (newvalue, oldvalue) {

            if (newvalue != oldvalue) {

                $scope.user.acountL = $filter("lowercase")($scope.user.acount)

            }

        });

    });

</script>

　　三、内置过滤器

　　　　1、货币过滤器，关键词：currency

　　　　　货币过滤器的实现效果是，在被过滤的学习前加上货币符号，默认货币符号为，当然可以自定义货币符号

　　　　2、时间过滤器，关键词：date

　　　　　时间过滤器顾名思义就是格式化时间。
　　　　时间格式的表达式和后端语言一直，简单的罗列回顾几个关键的表示方式
　　　　　yy:代表年份的最后两位，如18
　　　　 yyyy:代表完整的4位年份
　　　　　MM:代表月份
　　　　   dd:代表日期
　　　　   hh:代表时间12小时制
　　　　 HH:代表时间24小时制
　　　　   mm:代表分钟
　　　　   ss:代表秒
　　　　　有了上面的基础，我们要对一个时间进行格式就可以根据需要自由组合了
比如我们要格式化为：xxxx年xx月xx日，其格式为：yyyy年MM月dd日

　　　　3、针对以上两个内置过滤器做一个小练习

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

</head>

<body ng-app="myApp">

    <div ng-controller="myContro">

        <h1>angular js 之过滤器</h1>

        <div>angular js 的过滤器简单的理解就是格式化数据，当数据格式不满足要求时不会报错，直接展示空<br />

         angularjs内置了一些常用的过滤器，当然也可以根据需要自定义过滤器

       </div>

        <div style="margin-top:60px;">

            <h1>内置过滤器</h1>

            <h3>货币过滤器，关键词：currency</h3>

            <div>货币过滤器的实现效果是，在被过滤的学习前加上货币符号，默认货币符号为，当然可以自定义货币符号</div>

            <div>

                金额：<input type="text" ng-model="user.price" placeholder="请输入金额" />

                <div>默认货币展示结果:{{user.price|number:2|currency}}</div>

                <div>自定义货币展示结果:{{user.price|number:2|currency:'人民币'}}</div>

            </div>

            <h3>时间过滤器，关键词：date</h3>

            时间过滤器顾名思义就是格式化时间。<br />

            时间格式的表达式和后端语言一直，简单的罗列回顾几个关键的表示方式<br />

            yy:代表年份的最后两位，如18<br />

            yyyy:代表完整的4位年份<br />

            MM:代表月份<br />

            dd:代表日期<br />

            hh:代表时间12小时制<br />

            HH:代表时间24小时制<br />

            mm:代表分钟<br />

            ss:代表秒<br />

            有了上面的基础，我们要对一个时间进行格式就可以根据需要自由组合了<br />

            比如我们要格式化为：xxxx年xx月xx日，其格式为：yyyy年MM月dd日

            <div>例如：格式显示系统当前时间：{{nowDate|date:'yyyy-MM-dd HH:mm:ss'}}</div>

        </div>

    </div>

</body>

</html>

<script src="../Scripts/angular.js"></script>

<script type="text/javascript">

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

    myApp.controller("myContro", function ($scope, $filter) {

    });

</script>

　　好了，时间也不早了，明天还要上班，今天就先学到这，明天继续学习其他内置过滤器，谢谢大家支持与鼓励。