Angular - - filter 过滤器

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“文本的对象都放进个新数组并返回该数组

时间: 2024-10-12 02:49:06

Angular - - filter 过滤器的相关文章

angular的filter过滤器

输入过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中,该过滤器后跟一个冒号和一个模型名称. filter 过滤器从数组中选择一个子集: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.staticfile.org/angular.js/1.4.6/ang

filter 过滤器从数组中选择一个子集

输入过滤器可以通过一个管道字符和一个过滤器添加到指令中,该过滤器后面跟着一个冒号:冒号后面是一个模型名称. <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible"content="

angular JS 过滤器

过滤器: 过滤器用来格式化需要展示给用户的数据. AngularJS有很多实用的内置过滤器,也可以自己创建过滤器. 可以使用过滤器:  前面是数据, 后面是格式 {{ name | uppercase }} 可以通过$filter来调用过滤器, app.controller('DemoController', ['$scope', '$filter',function($scope, $filter) { $scope.name = $filter('lowercase')('Ari'); //

estore商城案例(三)------Filter过滤器:自动登录&amp;权限管理

前面写好了用户登录\注册\添加商品的功能模块.下面写一下对于这些功能模块的相关过滤器---自动登录与权限管理: 一.自动登录: 业务逻辑是这样的:jsp登录页面有个“自动登录选项”,如果登录这勾选了,那么在serlvet程序中则会额外的生成一个保存用户名和密码的cookie,然后每次用户向服务器发送请求时,Filter过滤器都会先判断用户的登录状态(session),如果已经登录那么无需做出受任何操作直接放行,如果没有登录(无session),那么这时体现自动登录功能作用的时候到了,先获取自动登

Java Web总结十九Filter过滤器

一.Filter简介 Filter也称之为过滤器,它是Servlet技术中最激动人心的技术,Web开发人员通过Filter技术,对Web服务器管理的所有Web资源:例如Jsp,Servlet,静态图片文件或静态HTML文件等进行拦截,从而实现一些特殊的功能.例如实现URL级别的权限访问控制.过滤敏感词汇.自动登录.压缩响应信息等一些高级功能. Servlet API中提供了一个Filter接口,开发Web应用时,如果编写的Java类实现了这个接口,则把这个Java类称之为过滤器Filter.通过

SSH2——filter过滤器

概述: 过滤器是Servlet2.3以上新增加的一个功能,其技术也是非常强大的.通过Filter技术可以对WEB服务器的文件进行拦截,从而实现一些特殊的功能.在JSP开发应用中也是必备的技能之一.Filter可以改变一个request(请求)和修改一个response(响应).Filter不是一个Servlet,它不能产生一个response,它能够在一个requsst到达Servlet之前预处理request,也可以在离开Servlet时处理response. 原理: 当Web容器接受到一个对

Filter过滤器简单应用( 接口访问控制 )

一.描述 在提供安卓.IOS客户端接口时,可以在登陆接口分配Session给客户端,用于判断其他接口是否是合法访问,以避免将所有的接口都暴露在web中可以由路径直接访问.但是最近的一个项目中的移动接口并没有给客户端分配Session,所以所有的接口都可以通过路径直接访问,这种方式会存在一定的风险性,只能通过接口对参数进行更精确的验证.一般情况下为方便管理会将所有接口单独放到WebRoot下单独一个文件夹目录下如WebRoot/appreq.改目录下的接口可直接被访问,如:http://local

Filter 过滤器

Filter 过滤器 原文链接:http://tianweili.github.io/blog/2015/01/26/java-filter/ 1.简介 Filter也称之为过滤器,它是Servlet技术中最实用的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静态图片文件或静态 html 文件等进行拦截,从而实现一些特殊的功能.例如实现URL级别的权限访问控制.过滤敏感词汇.压缩响应信息等一些高级功能. 它主要用于对用户请求进行预处

Filter过滤器(1)

Filter也称之为过滤器,它是Servlet技术中比较激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静态图片文件或静态 html 文件等进行拦截,从而实现一些特殊的功能.例如实现URL级别的权限访问控制.过滤敏感词汇.压缩响应信息等一些高级功能. 其顺序图如下(Servlet API中提供了一个Filter接口,开发web应用时,如果编写的Java类实现了这个接口,则把这个java类称之为过滤器Filter.通过Filt