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

2018-08-26 17:26:45来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

  

 您好,我是一名后端开发工程师,由于工作需要,现在系统的从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>

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

 
 
 
 
 
 
 
 
 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:js--兼容写法

下一篇:笔记