zoukankan      html  css  js  c++  java
  • Angular——内置过滤器

    基本介绍

    在AngularJS中使用过滤器格式化展示数据,在“{{}}”中使用“|”来调用过滤器,使用“:”传递参数。

    基本使用

    过滤器可以串起来使用,只要用   |  来衔接就行了,可以将上次返回的结果,作为下次的参数再次进行处理,所以 | 也被称为是管道符

    1、currency将数值格式化为货币格式
    2、date日期格式化,年(y)、月(M)、日(d)、星期(EEEE/EEE)、时(H/h)、分(m)、秒(s)、毫秒(.sss),也可以组合到一起使用。
    3、filter在给定数组中选择满足条件的一个子集,并返回一个新数组,其条件可以是一个字符串、对象、函数
    4、json将Javascrip对象转成JSON字符串。
    5、limitTo取出字符串或数组的前(正数)几位或后(负数)几位
    6、lowercase将文本转换成小写格式
    7、uppercase将文本转换成大写格式
    8、number数字格式化,可控制小位位数
    9、orderBy对数组进行排序,第2个参数可控制方向
    <!DOCTYPE html>
    <html lang="en" ng-app="App">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../libs/angular.min.js"></script>
    </head>
    <body>
    <ul ng-controller="DemoController">
        <li>{{price|currency:'¥'}}</li>
        <li>{{now|date:'yy/mm/dd'}}</li>
        <li>{{now|date:'yy/MM/dd hh:mm:ss'}}</li>
        <li>{{items|filter:'s'}}</li>
        <li>{{students|filter:{age:18} }}</li>
        <li>{{students|json}}</li>
        <li>{{students|limitTo:-2}}</li>
        <li>{{str|uppercase}}</li>
        <li>{{str|lowercase}}</li>
        <li>{{num|number:4}}</li>
        <li>{{items|orderBy:'':true}}</li>
        <li>{{students|orderBy:'age':false}}</li>
        <li>{{str|uppercase|limitTo:-4}}</li>
    </ul>
    <script>
        var App = angular.module('App', []);
        App.controller('DemoController', ['$scope', function ($scope) {
            $scope.price = 11.11;
            $scope.now = new Date();
            $scope.items = ['html', 'css', 'js'];
            $scope.students = [
                {name: '小明', age: 18},
                {name: '小红', age: 11},
                {name: '小雪', age: 19}
            ];
            $scope.str = 'Hello World';
            $scope.num = 10.2345;
        }]);
        // 过滤器:将数据格式化数据 在{{}}中使用|来调用过滤器,用:传递参数
        // 时间过滤器是M大写可以区分时分秒的分
        // 如果过滤对象的时候 需要空格
        // limitTo 可以截取数组或者字符串  -2 值是负值代表从右边截取
        // 这些指定可以相互串起来用
    </script>
    </body>
    </html>

  • 相关阅读:
    [Docker] redis 全配置
    Dubbo的负载均衡策略&容错策略
    Dubbo部分知识点总结
    如何win10 上访问虚拟机(linux)上redis方法
    Linux_centOS_5.7_64下如何安装jdk1.8&mysql
    java高级&资深&专家面试题-行走江湖必备-持续更新ing
    springCloud微服务调用失败【CannotGetJdbcConnectionException: Failed to obtain JDBC Connection】
    synchronized、volatile区别、synchronized锁粒度、模拟死锁场景、原子性与可见性
    ThreadLocal什么时候会出现OOM的情况?为什么?
    volatile、ThreadLocal的使用场景和原理
  • 原文地址:https://www.cnblogs.com/wuqiuxue/p/8413007.html
Copyright © 2011-2022 走看看