angular的filter

filter两种用法

1、在模板中使用filter

{{expression|filter}}//基本用法

{{expression|filter1|filter2|filter3}}//多个过滤器，上一段输出为下一段输入

{{expression|filter:args1,args2,...}}//带参数

除了使用简单的表达式，还可以在ng-repeat中使用，在这里我们获得处理的对象是一个数组，或者对象，不是单个的item

<span ng-repeat="a in arr|filter"></span>

2、在controller和serveice中使用filter

使用filter，在间接使用

app.controller('MyCtrl',function($scope,$filter){

    $scope.num = $filter('currency')(123456);

    $scope.date = $filter('date')(new Date());

});


直接使用

app.controller('MyCtrl',function($scope,currencyFilter){

    $scope.num = currencyFilter(123456);

});

filter中需要注意的一点是，filter这个名字的也是一个angular本身自带的filter，用来匹配子串的。

自定义过滤器

最简单的用法

app.filter('hello',function(){

    return function(input){

        var str = 'hello world';

        return str;

    }

});

加上参数的用法

app.filter('ha',function(){

    return function(input,args,args2){

        var str = 'hello world'+args+args2;

        return str;

    }

});

filter在使用时的坑

ng-repeat中的$index

这里在使用$index就会面临，在filter出匹配的子串之后，$index的值不变化的问题，对应值就不是现在的list

<body ng-app="demo">

    <p>Click the test button to see what result you would get when using <code>$index</code>

      vs when using <code>item</code> directly</p>

    <p>Try filtering for example for <kbd>foo</kbd> and you'll get a different result</p>

    <div ng-controller="DemoCtrl">

      <input type="text" ng-model="filter" placeholder="Filter the list">

      <ul>

        <li ng-repeat="item in items | filter:{ name: filter }">

          {{item.name}}

          <button ng-click="getResult($index, item)">test</button>

        </li>

      </ul>

      <h2>Results</h2>

      <p><code>$index:</code> {{indexResult.name}}</p>

      <p><code>item:</code> {{itemResult.name}}</p>

    </div>

  </body>


var app = angular.module('demo', ['ng']);

app.controller('DemoCtrl', ['$scope', function($scope) {

  $scope.items = [

    { name: 'Hello' },

    { name: 'Foobar' },

    { name: 'Barfoo' },

    { name: 'Magic' },

    { name: 'Wand' }

  ];

  $scope.getResult = function($index, item) {

    $scope.indexResult = $scope.items[$index];

    $scope.itemResult = item;

  };

}]);

angular的filter的更多相关文章

  1. angular的$filter服务

    首先,介绍下$filter服务: 1.$filter是用来进行数据格式化的专用服务: 2.AngularJS内置了currency.date.filter.json.limitTo.lowercase ...

  2. Angular之filter学习

    过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果.主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等.ng内置了一些过滤器,它们 ...

  3. angular 自定义filter

    用modul.filter .filter("fiilterCity",function(){ return function(obj){ var newObj = []; ang ...

  4. angular入门--filter搜索

    首先,列表绑定忽略 先上代码 <html ng-app="app1"> <head> <meta charset='utf-8' /> < ...

  5. 转载:Angular的filter总结

    过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果.主要用在数据的格式化上,例如获取一个数组 中的子集,对数组中的元素进行排序等.ng内置了一些过滤器,它 ...

  6. [Angular 2] Filter items with a custom search Pipe in Angular 2

    This lessons implements the Search Pipe with a new SearchBox component so you can search through eac ...

  7. Angular Input格式化

    今天在Angular中文群有位同学问到:如何实现对input box的格式化.如下的方式对吗? <input type="text" ng-model="demo. ...

  8. Part 13 Create a custom filter in AngularJS

    Custom filter in AngularJS 1. Is a function that returns a function 2. Use the filter function to cr ...

  9. 【转】Angular Input格式化

    今天在Angular中文群有位同学问到:如何实现对input box的格式化.如下的方式对吗? <input type="text" ng-model="demo. ...

随机推荐

  1. 初始化D3D设备

    bool initD3D(HWND hWnd) { // 主要目的是获取设备,为调用下面的函数做很多准备. // 比如 获取IDirect3D9 ,获取支持的顶点处理,填充后备缓冲相关参数等. // ...

  2. POJ2635——The Embarrassed Cryptographer(高精度取模+筛选取素数)

    The Embarrassed Cryptographer DescriptionThe young and very promising cryptographer Odd Even has imp ...

  3. Windbg调试命令详解（3）

    3 进程与线程 既可以显示进程和线程列表,又可以显示指定进程或线程的详细信息.调试命令可以提供比taskmgr更详尽的进程资料,在调试过程中不可或缺. 3.1 进程命令 进程命令包括这些内容:显示进程 ...

  4. struts采用JavaServlet/JSP技术，实现了基于Java EEWeb应用的MVC设计模式的应用框架

    今天我用Ecipse搭建Struts框架,并且使用Struts框架编写一个最简单的例子,相信读者能够很容易的明白. Struts是当今Java比较流行的三大框架之一,三大框架是Struts,sprin ...

  5. 理解Java对象序列化(二)

    关于Java序列化的文章早已是汗牛充栋了,本文是对我个人过往学习,理解及应用Java序列化的一个总结.此文内容涉及Java序列化的基本原理,以及多种方法对序列化形式进行定制.在撰写本文时,既参考了Th ...

  6. [.NET WebAPI系列02] WebAPI 中的HTTP通信

    [前言] 本节用于承上启下,通过第一节了解的WebAPI的基本语法,Controller CRUD方法的基本格式: 但很多场合,第一节中的Web API Controller方法返回的信息 过于简单, ...

  7. Azure HDInsight HBase DR解决方案

    Sun wei  Sat, Feb 28 2015 3:07 AM Apache HBase是目前非常流行的NoSQL数据库,通过HDFS+Zookeep+Master+Region Server的架 ...

  8. Oracle 10g DataGuard手记之基础配置

    DataGuard为企业数据的高可用性,数据安全以及灾难恢复提供支持,一般由一个primary db与几个物理或逻辑standby db组成一个DataGuard配置. 系统环境 操作系统为windo ...

  9. Ejabberd源码解析前奏--集群

    一.如何工作 一个XMPP域是由一个或多个ejabberd节点伺服的. 这些节点可能运行在通过网络连接的不同机器上. 它们都必须有能力连接到所有其它节点的4369端口, 并且必须有相同的 magic ...

  10. (二)学习JavaScript之setInterval和clearInterval方法

    参考:http://www.w3school.com.cn/jsref/met_win_setinterval.asp HTML DOM Window 对象 定义和用法 setInterval() 方 ...