• 转载 angularJS filter 过滤器


    angularjs中的filter(过滤器)

    标签: angularjsfilter
     

    源文地址:http://www.ncloud.hk/技术分享/angularjs中的filter-过滤器/

    filters可以用来格式化数据。例如把时间格式化成为yyyy-MM-dd的形式来呈现给用户,方便查看。AngularJS内置了一些filters,我们也可以根据自己的需要自定义一些filters.

    下面是angularjs提供的filters:

    currency:格式化一个数字成为一种货币。当没有提供任何货币符号时,使用当前区域的默认符号。

    number:格式化数字成为文本

    filter:从数组中选择一个子集,并将其返回为一个新数组

    date:基于要求的格式格式化日期为字符串

    json:允许你将一个JavaScript对象转化为JSON字符串

    lowercase:转换字符串成为小写

    uppercase:转换字符串成为大写

    limitTo:将数组/字符串限定为一个指定的元素/字符数。

    orderBy:通过给定的表达式指定数组,它是按字母顺序排列的字符串和数值。

    用法介绍:

    html中用法:

    filter可以用管道符 | 添加到表达式:{{expression | filter}}

    也可以多个filter连用,上一个filter的输出作为下一个filter的输出:

    {{expression | filter1 | filter2 |……}}

    还可以在指令中用参数:

    例如: <li ng-repeat=“x in names | orderBy:’country’”>

    或<li ng-repeat=“x in names | filter : ‘i’>

    javascript中用法:

    例:$scope.formatDate = $filter('date')(today, 'yyyy-MM-dd');

    {{事件戳  | data:"yyyy-mm-dd"}}   格式化为  年月日 格式

    有时候angularjs内置的filter不够用,我们就可以自己定义一个过滤器。

    例如定义一个名为“myFormat”的过滤器,

    <ul ng-app="myApp"ng-controller="namesCtrl">

        <li ng-repeat="x in names">

            {{x | myFormat}}

        </li>

    </ul>

    <script>

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

    app.filter('myFormat', function() {

        returnfunction(x) {

            var i, c, txt = "";

            x = x.split("")

            for (i = 0; i < x.length; i++) {

                c = x[i];

                if (i % 2 == 0) {

                    c = c.toUpperCase();

                }

                txt += c;

            }

            return txt;

        };

    });

    app.controller('namesCtrl', function($scope) {

        $scope.names = ['Jani', 'Carl', 'Margareth', 'Hege', 'Joe', 'Gustav', 'Birgit','Mary', 'Kai'];

    });

    </script>

    这个myFormat过滤器将会格式化其它奇数位的字符为大写。

  • 相关阅读:
    再谈H2的MVStore与MVMap
    log4j动态日志级别调整
    wireshark抓文件上传的包的结果记录
    struts2对properties资源的处理
    Spring core resourc层结构体系及JDK与Spring对classpath中资源的获取方式及结果对比
    [工具使用] visualvm 通过jmx不能连接
    oracle 安装 启动listener 建库相关
    vscode
    XSSFWorkbook
    TearmQuery()
  • 原文地址:https://www.cnblogs.com/baota/p/6558791.html
Copyright © 2020-2023  润新知