星空网 > 软件开发 > Java

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' }} <!-- Aug 09, 2013 12:09:02 PM --> {{ today | date:'short' }} <!-- 8/9/1312:09PM -->{{ 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);     }   });

         




原标题:AngularJS 笔记系列(五)过滤器 filter

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

跨境电商与海淘代购有什么区别?:https://www.ikjzd.com/articles/109815
跨境电子商务综合试验区是什么?有哪些省份城市能开展进出口跨境保税业务:https://www.ikjzd.com/articles/109816
亚马逊3分选品选不会,7分努力全白费,想学?:https://www.ikjzd.com/articles/109817
旺季突遇审核,用这个模版快速完成申诉!:https://www.ikjzd.com/articles/109818
跨境卖家必看:新品如何备战旺季?:https://www.ikjzd.com/articles/109819
跨境一周大事件:多家公司晒出Q3财报!:https://www.ikjzd.com/articles/109820
长治婚庆女司仪和主持人:https://www.vstour.cn/a/366176.html
北京丰台区水上乐园哪家好玩?:https://www.vstour.cn/a/366177.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流