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

          在前面介绍angularjs已经很多了,中途由于工作和一切生活琐事,暂停了很久。今天在这里将继续angularjs讲解,这节我们来看看angularjs的过滤去filter。

          在我们开发中经常需要在页面显示给用户的信息需要一定处理格式化,才能显示给用户。比如时间本地化,或者yyyy-MM-dd HH:mm:ss格式,数字精度格式化,本地化,人名格式化等等。在angularjs中为我们提供了叫filter的指令,让我们能够很轻易就能做到着一些列的功能,angularjs内部为我们提供了number等很多内置的filter。并且我们能够很轻易的自定义自己的领域filter。

          如下实例:

    html:

     1 <div ng-app="app" ng-controller="test">
     2 num:<input ng-model="num" />
     3 <br/>
     4 {{num | number}}
     5 <br/>
     6 {{num | number:2}}
     7 <br/>
     8 first name:<input ng-model="person.first"/>
     9 <br/>
    10 last name:<input ng-model="person.last"/>
    11 <br/>
    12 name: {{person | fullname}}
    13     <br/>
    14 name: {{person | fullname:"- -"}}
    15        <br/>
    16 name: {{person | fullname:" " | uppercase }}
    17 </div>

    js:

    function test($scope) {

    }
    angular.module("app", []).controller("test", test).
    filter("fullname", function() {
        var filterfun = function(person, sep) {
            sep = sep || " ";
            person = person || {};
            person.first = person.first || "";
            person.last = person.last || "";
            return person.first + sep + person.last;
        };
        return filterfun;
    });​

    jsfiddle效果:http://jsfiddle.net/whitewolf/uCPPK/9/

          在实例中首先演示了angularjs自带的number的filter使用。再同样为我们样式了如何去创建一个angularjs的filter。其实现很简单.angularjs使得扩展一切变得自然

          最后说明:angularjs filters支持链式写法,如何powershell或者其他操作系统外壳语言一样的管道式模型,形如 value | filter1 | filter2。

  • 相关阅读:
    Qt计算器开发(三):执行效果及项目总结
    [HNOI2019]校园旅行
    How to fix nuget Unrecognized license type MIT when pack
    How to fix nuget Unrecognized license type MIT when pack
    git 通过 SublimeMerge 处理冲突
    git 通过 SublimeMerge 处理冲突
    git 上传当前分支
    git 上传当前分支
    gif 格式
    gif 格式
  • 原文地址:https://www.cnblogs.com/whitewolf/p/2748920.html
Copyright © 2011-2022 走看看