AngularJS 笔记体系(五)过滤器 filter

过滤器是用来格式化给用户展现的数码的。

当 HTML 中之模版绑定符号{{}} 内通过|符号来调用过滤器。

  • 大写:{{ name | uppercase }}

呢堪在 JS 中开展调用$filter 服务。

  • app.controller(‘DemoController’, [‘$scope’, ‘$filter’,
           function($scope, $filter) {
             $scope.name = $filter('lowercase')('Ari');
         }]);
    

向过滤器传参:{{1234.5643445 | number:2
}}

常用的过滤器:

  • 货币 {{123.5 | currency }}
  • date

    • {{ today | date:’medium’ }} {{ today | date:’short’ }}
      {{ today | date:'fullDate' }} <!-- Thursday, August 09, 2013 --> {{ today | date:'longDate' }} <!-- August 09, 2013 -->
      {{ today | date:'mediumDate' }}<!-- Aug 09, 2013 --> {{ today | date:'shortDate' }} <!-- 8/9/13 -->
      {{ today | date:'mediumTime' }}<!-- 12:09:02 PM --> {{ today | date:'shortTime' }} <!-- 12:09 PM -->
      
  • 年份 {{ today | date:’yyyy’ }} <!–
    2013 –> {{ today | date:’yy’ }} <!– 13 –> {{ today |
    date:’y’ }} <!– 2013 –>

  • 月份 { today | date:’MMMM’ }} <!–
    August –>{{ today | date:’MMM’ }} <!– Aug –> {{ today
    |date:’MM’ }}{{ today |date:’M’ }} 

 过滤器 filter

过滤器可以起于定数组中选拔一个子集,然后作为一个初数组再次回到。

参数:

string

  • 归来所有包含这几个字符串的元素。参数前加!再次来到不含该 string 的素。
  • {{ [‘Ari’,’Lerner’,’Likes’,’To’,’Eat’,’Pizza’] | filter:’e’ }}
         <!-- ["Lerner","Likes","Eat"] -->
    

object

  • 用参数的性与价值和被过滤元素相应的性质举行相比,过滤出同样的素。
  • {{ [{
             'name': 'Ari',
             'City': 'San Francisco',
             'favorite food': 'Pizza'
             },{
             'name': 'Nate',
             'City': 'San Francisco',
             'favorite food': 'indian food'
             }] | filter:{'favorite food': 'Pizza'} }}
    <!-- [{"name":"Ari","City":"SanFrancisco","favoritefood":"Pizza"}] -->
    

function

  • 针对拥有因素执行此函数,过滤出重回结果为非假值的素。

json

  • 以一个 JSON 或者 JS 对象转换成字符串;
  • {{ {‘name’: ‘Ari’, ‘City’: ‘SanFrancisco’} | json }}
    <!-- {
     "name": "Ari",
     "City": "San Francisco"
    }-->
    

limitTo

  • 范围再次来到的数组或者字符串的长短;

orderBy

  • 纳多只参数,第一独凡是必要的,第二独可选。第一个是排序条件,第二单凡是单布尔值,true
    则仍排序条件逆序输出。

自定义过滤器

  • 概念一个模块用来创制 filter 是比好之不二法门。
  • angular.module(‘myApp.filters’, [])
        .filter('capitalize', function(input) {
            if (input) {
              return input[0].toUpperCase() + input.slice(1);
            }
        });
    

     

相关文章