zoukankan      html  css  js  c++  java
  • angularJS的过滤器!

    angularJS过滤器

    filter

    currency

    date

    filter

    json

    limitTo

    lowercase

    number

    orderBy

    uppercase

    ......

    Filter过滤器

    过滤器的主要用途就是一个格式化 / 筛选数据的小工具;

    一般用于服务端存储的数据转换为用户界面可以理解的数据;

    常见需要使用Filter的数据有:

    - 时间 1288323623006

    currency:它是用来过滤货币
    作用把数字过滤成 一个货币:
    使用:竖杠+过滤器名称
    <div ng-app=>
    <h1>{{20000 | currency}}</h1>
    </div>
    //效果:$20,000.00

    没有多少意义,国际标准货币,对我们不实用;

    date :转化为时间

    <div ng-app=>
    <h1>{{1288323623006 | date}}</h1>//效果 Oct 29, 2010
    <h1>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss'}}</h1>//效果 2010-10-29 11:40:23
    // 这里是英文的
    可以使用 angular-locale_zh-cn.js 来进行汉化
    </div>

    json过滤器

    <div ng-app="myApp" ng-controller="myAppController">
        {{jsonDate}}<br>
        {{jsonDate | json}}
    </div>
    <script type="text/javascript">
    var myApp = angular.module('myApp',[]);
    myApp.controller('myAppController',['$scope',function($scope){
        $scope.jsonDate = {
            zifuchuan:'张三',
            shuzi:19,
            bool:false,
            json:{name:'老王',age:18},
            shuzu:[{name:'老王',age:'18'},{name:'老王',age:'18'}]
        };
    }]);
    </script>

    limitTo过滤器:限制到:

    作用:用来控制字符串展示多少长度;

    <div ng-app>{{'www.baidu.com,baidu.com' | limitTo:10}}</div>
    //www.baidu.

    具体语法:

    {{limiTo_expression | limitTo:limit:begin}}

    limit是必选项,begin是可选项;

    number过滤器: 格式化(保留小数)这里会进行四舍五入

    <div ng-app>{{1459824.1542558 | number:2}}</div>
    // 效果:1,459,824.15

    接下来的过滤器,在使用过程中在做阐述;

  • 相关阅读:
    win7 64位系统,vs2010下配置OpenGL开发环境
    OpenCV stereo matching 代码 matlab实现视差显示
    Cocos2d-x 3.x游戏开发之旅
    芯片验证漫游指南
    名师讲坛:PHP开发实战权威指南
    Python带我起飞:入门、进阶、商业实战
    新编Excel会计与财务管理应用大全(2016实战精华版)
    CorelDRAW X7中文版完全自学宝典
    HTML5 canvas开发详解(第2版)
    中文版3ds Max 2014--VRay效果图制作实用教程
  • 原文地址:https://www.cnblogs.com/e0yu/p/7223349.html
Copyright © 2011-2022 走看看