zoukankan      html  css  js  c++  java
  • AngularJS开发指南13:AngularJS的过滤器详解

    AngularJS过滤器是用来格式化输出数据的。除了格式化数据,过滤器还能修改DOM。这使得过滤器通常用来做些如“适时的给输出加入CSS样式”等工作。

    比如,你可能有些数据在输出之前需要根据进行本地化。你可以向下面这样使用链式的过滤器来传递表达式:

    name | uppercase

    这个表达式执行时会将name的值传递给uppercase过滤器。

    写一个你自己的过滤器非常容易:在你的模块中注册一个新的过滤器(可注入的)工厂函数就行了。这个工厂函数必须返回一个新的过滤器函数,这个过滤函数的第一个参数接受的是输入。任何过滤器参数都会被当成附加的参数传递给过滤器。

    下面的例子展示了逆转字符串文本。另外,它有条件地将文本大写。

    <!doctype html>
    <html ng-app="MyReverseModule">
      <head>
        <script src="http://code.angularjs.org/angular-1.0.2.min.js"></script>
        <script src="script.js"></script>
      </head>
      <body>
        <div ng-controller="Ctrl">
          <input ng-model="greeting" type="greeting"><br>
          No filter: {{greeting}}<br>
          Reverse: {{greeting|reverse}}<br>
          Reverse + uppercase: {{greeting|reverse:true}}<br>
        </div>
      </body>
    </html>

    script.js:

    angular.module('MyReverseModule', []).
      filter('reverse', function() {
        return function(input, uppercase) {
          var out = "";
          for (var i = 0; i < input.length; i++) {
            out = input.charAt(i) + out;
          }
          // conditional based on optional argument
          if (uppercase) {
            out = out.toUpperCase();
          }
          return out;
        }
      });
    
    function Ctrl($scope) {
      $scope.greeting = 'hello';
    }

    过滤器可用在任何api或者ng.$rootScoe.Scope的执行过程中,不过一般用来格式化绑定在模板中的表达式。

    {{ expression | filter }}

    过滤器一般在处理过程中将数据转变成新的格式。它能使用链式风格,还能接受附加参数。

    你可以像下面这样使用链式风格:

    {{ expression | filter1 | filter2 }}

    你也可以使用“:”来传递额外的参数给过滤器,比如,将数字123格式化成带有2位小数的形式:

    123 | number:2

    下面有些例子,展示了使用不同过滤器格式化之前和之后的样子:

    • 无过滤器: {{1234.5678}} => 1234.5678
    • 数字过滤器: {{1234.5678|number}} => 1,234.57. 注意","号和四舍五入后的后两位。
    • 带参数的过滤器: {{1234.5678|number:5}} => 1,234.56780. 过滤器可以接受额外的参数,参数写在“:”的后面。比如,number过滤器接受数值型参数来制定需要展示几位小数。

    加油!

  • 相关阅读:
    二级目录下的SESSION共享问题
    [Leetcode 65] 120 Triangle
    JMeter学习(一)工具简单介绍
    pycham破解方法——Mac上亲测成功
    jmeter目前发现一丢丢强大的功能(未完待续,需优化)
    jmeter实现请求返回参数利用到下一个请求中
    通用化case,拿走不谢——测试之路
    mac 下pip安装python三方库的时候提示 Could not fetch URL https://pypi.python.org/simple/virtualenv/: There was a problem confirming the ssl certificate:......
    sudo pip install MySQLdb找不到该资源的原因
    软件质量管理实践总结
  • 原文地址:https://www.cnblogs.com/chaojidan/p/4249552.html
Copyright © 2011-2022 走看看