• Angular


    Filter

    Ng里的过滤器。

    currency:把一个数字格式化成货币模式(如$1,234.56)。当没有提供任何货币符号时,默认使用当前区域的符号。

    使用:

    HTML:{{ currency_expression | currency:symbol:fractionSize}}

    JS:$filter(“currency”)(amount,symbol,fractionSize);

    amount:数值,过滤的值。

    symbol:字符串,要显示的货币符号或标识符。

    fractionSize:数值,整数的小数位数,默认为当前的最大位数。

    date:基于需要的格式将时间格式化成字符串。

    使用:

    HTML:{{date_expression | date:format:timezone}}

    JS:$filter(“date”)(date,format,timezone);

    date:格式化为日期的日期对象。如果没有指定输入的时区字符串,时间则是当地时间。

    format:格式规则/格式。

    timezone:时区。

    filter:从数组中选出一个子集,并将其作为一个新数组返回。

    使用:

    HTML:{{filter_expression | filter:expression:comparator}}

    JS:$filter(“filter”)(array,expression,comparator);

    array:被过滤的数组。

    expression:字符串/对象/函数,用于从数组中选择数据的判断表达式。使用$可以匹配任何字段。

    comparator:函数/Boolean/undefined,用于确定预期的值(从filter表达式返回)和实际的值(数组中的对象)进行比较,应视为匹配。function(actual,expected);

    json:允许将一个javascript对象转换为json字符串。

    使用:

    HTML:{{json_expression | json:spacing}}

    JS:$filter(“json”)(object,spacing);

    object:过滤的对象。

    spacing:每个缩进的空格数,默认为2。

    limitTo:创建一个只包含指定数目元素的数组或字符串。元素是按指定的值和符号(+或-)从数组、字符串或数字的开头或结尾获取的。如果输入一个数字,则转换为字符串。

    使用:

    HTML:{{limitTo_expression | limitTo:limit:begin}}

    JS:$filter(“limitTo”)(input,limit,begin);

    input:限制的数组,字符串,数字。

    limit:限制的长度。

    begin:限制长度开始的位置(根据索引)。

    lowercase:将字符串转换为小写。

    使用:

    HTML:{{lowercase_expression | lowercase}}

    JS:$filter(“lowercase”)(input);

    Input:过滤的字符串。

    number:将数值转换为文本。

    如果输入是null或undefined,那么其将被返回。如果输入的是无穷(正无穷/负无穷),将会返回无穷大的符号“∞”。如果输入不是一个数字,返回一个空字符串。

    使用:

    HTML:{{number_expression | number:fractionSize}}

    JS:$filter(“number”)(number,fractionSize);

    number:转换的数值。

    fractionSize:数值,整数的小数位数,默认为当前的最大位数。在默认的区域设置的情况下这个数值是3。

    orderBy:通过判断表达式将指定的数组进行排序。它是按字符串的字母顺序和数值的数字排序的。

    注意:如果你发现数字没有按预期排序,请确保它们实际上是被保存为数字而不是字符串。

    使用:

    HTML:{{orderBy_expression | orderBy:expression:reverse}}

    JS:$filter(“orderBy”)(array,expression,reverse);

    array:排序的数组。

    expression:字符串/函数/数组,用来确定元素顺序的表达式。

    reverse:boolean,颠倒数组的顺序。默认为false。

    uppercase:将字符串转换为大写。

    使用:

    HTML:{{uppercase_expression |uppercase}}

    JS:$filter(“uppercase”)(input);

    Input:过滤的字符串。

    自带filter使用代码:

    复制代码
      <div ng-app="Demo" ng-controller="testCtrl as ctrl">
         <!-- HTML: {{ctrl.currencyValue | currency:"USD$":1}} -->
         {{ctrl.currencyValue}}
         <!-- HTML: {{ctrl.dateValue | date:"yyyy-MM-dd"}} -->
         {{ctrl.dateValue}}
         <!-- HTML: <div ng-repeat="i in newArr = (ctrl.arr | filter:'2')">{{i}}</div> -->
         <div ng-repeat="i in ctrl.newArr">{{i}}</div>
         <!-- HTML: <div ng-repeat="i in newArr = (ctrl.arr | filter:{check:true})">{{i}}</div> -->
         <div ng-repeat="i in ctrl._newArr">{{i}}</div>
         {{ctrl.obj | json}}
         <!-- HTML: <div ng-repeat="i in ctrl.arr | limitTo:3:2">{{i}}</div> -->
         <div ng-repeat="i in ctrl.secondNewArr">{{i}}</div>
         <!-- HTML: {{ctrl.str | lowercase}} -->
         {{ctrl.str}}
         <!-- HTML: <div ng-repeat="i in ctrl.arr | orderBy:'name':true">{{i}}</div> -->
         <div ng-repeat="i in ctrl.thirdNewArr">{{i}}</div>
         <!-- HTML: {{ctrl.str | uppercase}} -->
         {{ctrl.newStr}}
      </div>
    复制代码
    复制代码
      (function () {
        angular.module("Demo", [])
        .controller("testCtrl", ["$filter",testCtrl]);
        function testCtrl($filter) {
            var vm = this;
            vm.currencyValue = 1234.56;
            vm.currencyValue = $filter("currency")(vm.currencyValue,"USD$",1);
            vm.dateValue = new Date();
            vm.dateValue = $filter("date")(vm.dateValue,"yyyy-MM-dd");
            vm.arr = [{name:'John', phone:'555-1276',check:true},
                      {name:'Mary', phone:'800-BIG-MARY',check:false},
                      {name:'Mike', phone:'555-4321',check:true},
                      {name:'Adam', phone:'555-5678',check:true},
                      {name:'Julie', phone:'555-8765',check:false},
                      {name:'Juliette', phone:'555-5678',check:true}];
            vm.newArr = $filter("filter")(vm.arr,"2");
            vm._newArr = $filter("filter")(vm.arr,{check:true});
            vm.obj = {"name":"beast","age":21};
            vm.secondNewArr = $filter("limitTo")(vm.arr,3,2);
            vm.str = "Hello World";
            vm.str = $filter("lowercase")(vm.str);
            vm.thirdNewArr = $filter("orderBy")(vm.arr,"name",true);
            vm.newStr = $filter("uppercase")(vm.str);
        };
      }());
    复制代码

    自定义filter

    基本代码:

      angular.module(“x”,[]).filter(“filterName”,[“dependancy”,function(dependancy){
           return function(value){
             //your code   return the data which passed filter(返回过滤后的数据)
      };
      }]);

    filterName:过滤器名称。

    dependency:注入的服务。

    value:需要过滤的数据。

    自定义filter使用代码:

      <div ng-app="Demo" ng-controller="testCtrl as ctrl">
        <div ng-repeat="i in newArr=(ctrl.arr | myFilter)">
           {{i.value}}
        </div>
      </div>
    复制代码
      (function () {
        angular.module("Demo", [])
        .filter("myFilter",myFilter)
        .controller("testCtrl", ["$filter",testCtrl]);
        function myFilter(){
           return function(value){
              var arr = [];
              angular.forEach(value,function(item,index){
                  if(item.value.indexOf("this")>=0){
                      arr.push(item);
                  }
              });
              return arr;
          }
        };
        function testCtrl($filter) {
            var vm = this;
            vm.arr = [{"value":"this is a."},{"value":"that is b."},{"value":"this is c."},{"value":"that is a."}];
        };
      }());
    复制代码

    这里对数组arr进行过滤,把数组中对象value属性的值含有”this“文本的对象都放进个新数组并返回该数组

  • 相关阅读:
    Ubuntu20.04安装Docker
    开启企业微信H5页面调试功能
    Python实现图遍历
    Linux命令整理
    BDP数据分析之高级计算
    PowerBI之DAX
    Dundas BI 简介
    tableau的高级计算
    k8s集群创建之后coredns一直处于pending状态
    Gradle打包工具入门
  • 原文地址:https://www.cnblogs.com/koleyang/p/5053128.html
Copyright © 2020-2023  润新知