zoukankan      html  css  js  c++  java
  • 过滤器

    过滤器
    过滤器是用在表达式中,实现对表达式结果的筛选、过滤、格式化,达到更好的表现效果


    语法:|--》管道
    {{表达式 | 过滤器1:'name' | 过滤器2 }}

    货币及任意符号

    <p>{{price}}</p>
    <p>{{price | currency}}</p>
    <p>{{price | currency :'¥'}}</p>
    <p>{{price | currency :'&'}}</p>

    时间
    <p>{{2336547896454 | date :'yyyy/MM/dd'}}</p>      2044/01/16
    <p>{{'lary' | uppercase}}</p>           大写
    <p>{{'lary' | lowercase}}</p> 小写

    orderBy 升序或者降序 orderBy:'age':true

    <ul ng-repeat="obj in list | orderBy:'age':true">
    <li>{{obj.name}}</li>
    </ul>

    js:
    $scope.list = [
    {name:'Lucy',age:30,score:95},
    {name:'Apple',age:10,score:90},
    {name:'Pen',age:32,score:100},
    {name:'Pen',age:40,score:100}
    ];

    limitTo 限定显示的数量
    <ol ng-repeat="obj in list | orderBy:'age':false | limitTo:3">
    <li>{{obj.name}}</li>
    </ol>

    只显示前3个


    number 限制显示小数点后几位

    <p>{{price | number : 3}}</p>
    只显示小数点后面3位

    练习:
        <ul ng-repeat="obj in list | orderBy:'score':true | limitTo:3">  按照分数排序,取前三个
    <li>{{obj.name+" "+obj.age+" "+obj.score}}</li>
    </ul>
    </div>
    <script>
    var app = angular.module('myApp', ['ng']);
    app.controller('myCtrl', function ($scope) {
    $scope.list = [
    {name:'Michael',age:30,score:80},
    {name:'Lincoln',age:20,score:90},
    {name:'TBag',age:80,score:95},
    {name:'TBag1',age:80,score:92},
    {name:'TBag2',age:80,score:10}
    ];
    })

    
    
    toJson/fromJson 

    序列化:将一个json对象转换为json格式的字符串
    反序列化:将一个json格式的字符串 转换为json格式的对象

    //    定义一个json对象
    var jsonObj = {"name":"Lucy","age":20};
    // 通过toJson方法将一个json对象 序列化为一个json格式的字符串
    console.log(angular.toJson(jsonObj));
    // 通过fromJson方法,将一个json格式的字符串 反序列化为一个json格式的对象
    console.log(angular.fromJson(jsonObj))

    
    
     
  • 相关阅读:
    Solution: Win 10 和 Ubuntu 16.04 LTS双系统, Win 10 不能从grub启动
    在Ubuntu上如何往fcitx里添加输入法
    LaTeX 笔记---Q&A
    Hong Kong Regional Online Preliminary 2016 C. Classrooms
    Codeforces 711E ZS and The Birthday Paradox
    poj 2342 anniversary party
    poj 1088 滑雪
    poj 2479 maximum sum
    poj 2481 cows
    poj 2352 stars
  • 原文地址:https://www.cnblogs.com/liangfc/p/7543177.html
Copyright © 2011-2022 走看看