<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body ng-app="myApp"  ng-controller="myCtrl">

    <div >

        <p>名字 : <input type="text" ng-model="firstName" ng-bind="firstName"></p>

        <p>名字 : <input type="text" ng-model="lastName" ng-bind="lastName"></p>

        <p>输入过滤 : <input type="text" ng-model="text" ng-bind="text"></p>

        <span>{{(firstName|lowercase)+" "+lastName}}</span>

        <span>{{5|currency}} </span>

    </div>

    <ul>

        <li ng-repeat="x in names |filter: text |orderBy:country">

            {{x.name+','+x.country}}

        </li>

    </ul>

    <script>

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

        app.controller('myCtrl', function ($scope) {

            $scope.firstName = "firstName";

            $scope.lastName = "lastName";

            $scope.names = [

                { 'name': 's1', 'country': 'china' },

                { 'name': 's2', 'country': 'america' },

                { 'name': 5, 'country': 'america' },

            ];

        });

    </script>

</body>

</html>

　　

text 绑定的过滤模型名称 li列表会过滤输入 进行模糊匹配







<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body ng-app="myApp"  ng-controller="myCtrl">

    <div >

        <p>名字 : <input type="text" ng-model="firstName" ng-bind="firstName"></p>

        <p>名字 : <input type="text" ng-model="lastName" ng-bind="lastName"></p>

        <p>输入过滤 : <input type="text" ng-model="text" ng-bind="text"></p>

        <span>{{(firstName|lowercase)+" "+lastName}}</span>

        <span>{{5|currency}} </span>

    </div>

    <ul>

        <li ng-repeat="x in names |filter: text |orderBy:country">

            {{x.name+','+(x.country|reverse)}}

        </li>

    </ul>

    <script>

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

        app.controller('myCtrl', function ($scope) {

            $scope.firstName = "firstName";

            $scope.lastName = "lastName";

            $scope.names = [

                { 'name': 's1', 'country': 'china' },

                { 'name': 's2', 'country': 'america' },

                { 'name': 5, 'country': 'america' },

            ];

        });

        //自定义一个过滤器反转字符顺序

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

            return function (text) {

                return text.split("").reverse().join("");

            }

        })

    </script>

</body>

</html>





　　添加自定义过滤器 接收参数 函数内部处理后返回


												


											
angular过滤器使用 自定义过滤器的更多相关文章
	

    
						
  1. angularjs学习第三天笔记（过滤器第二篇---filter过滤器及其自定义过滤器）
		
    您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
    
		
    2. 
						
  2. django模板的变量，标签，过滤器和自定义过滤器，注释
		
    模板的作用是计算并输出: {{ 变量}} 当模版引擎遇到点如book.title,会按照下列顺序解析: 1.字典book['title'] 2.先属性后方法,将book当作对象,查找属性title,如 ...
    
		
    3. 
						
  3. asp.net系统过滤器、自定义过滤器
		
    原文地址:http://www.cnblogs.com/kissdodog/archive/2013/05/21/3090513.html 一.系统过滤器使用说明 1.OutputCache过滤器 O ...
    
		
    4. 
						
  4. Vue.js学习 Item14 – 过滤器与自定义过滤器
		
    基础 类似于自定义指令,可以用全局方法 Vue.filter() 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数.过滤器函数以值为参数,返回转换后的值: Vue.filter('re ...
    
		
    5. 
						
  5. MVC系统过滤器、自定义过滤器
		
    一.系统过滤器使用说明 1.OutputCache过滤器 OutputCache过滤器用于缓存你查询结果,这样可以提高用户体验,也可以减少查询次数.它有以下属性: Duration:缓存的时间,以秒为 ...
    
		
    6. 
						
  6. ASP.NET MVC  系统过滤器、自定义过滤器
		
    一.系统过滤器使用说明 1.OutputCache过滤器 OutputCache过滤器用于缓存你查询结果,这样可以提高用户体验,也可以减少查询次数.它有以下属性: Duration:缓存的时间,以秒为 ...
    
		
    7. 
						
  7. flask框架下的jinja2模板引擎(2)(过滤器与自定义过滤器)
		
    flask框架下的jinja2模块引擎(1):https://www.cnblogs.com/chichung/p/9774556.html 这篇论文主要用来记录下 jinja2 的过滤器. 什么是过 ...
    
		
    8. 
								
  8. angular中的自定义过滤器
		
    <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...
    
		
    9. 
						
  9. angularJs的过滤器扩展及自定义过滤器
		
    一.过滤器扩展 1.过滤器的组合使用 <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 【枚举】【尺取法】hdu6103 Kirinriki
			
    两个等长字符串A,B的距离被定义为 给你一个字符串,问你对于所有长度相等的不相交子串对,其距离不超过m的前提下,最长的长度是多少. 枚举对称轴,两侧先贪心地扩展到最长,超过m之后,再缩短靠近对称轴的端 ...
    
			
    2. 
						
  2. 【Splay】Codeforces Round #424 (Div. 1, rated, based on VK Cup Finals) B. Cards Sorting
			
    Splay要支持找最左侧的最小值所在的位置.类似线段树一样处理一下,如果左子树最小值等于全局最小值,就查左子树:否则如果当前节点等于全局最小值,就查当前节点:否则查右子树. 为了统计答案,当然还得维护 ...
    
			
    3. 
						
  3. [Luogu1119]采蘑菇
			
    题目大意: 给你一个无向图,点i在时间t[i]之前是不存在的,有q组询问,问你时间为t时从x到y的最短路. 点的编号按出现的时间顺序给出,询问也按照时间顺序给出. 思路: Floyd. Floyd的本 ...
    
			
    4. 
						
  4. xml和集合混合使用-图书管理器
			
    package com.book; public class Book { private int id; //图书编号 private String name; //图书名称 private Str ...
    
			
    5. 
						
  5. SQL 中 HAVING 用法
			
    现在 Student表有 如下数据 现需求如下: 查找每个老师的学生的平均年龄且平均年齿大于12 不使用 HAVING SELECT * FROM (SELECT TeacherID, AVG(Age ...
    
			
    6. 
						
  6. Problem A: 指针：调用自定义交换函数，完成三个数整从小到大排列
			
    #include<stdio.h> int swap(int *p1,int *p2) { int flag; if(*p1>*p2) { flag=*p1; *p1=*p2; *p ...
    
			
    7. 
						
  7. [转]为什么匿名内部类参数必须为final类型
			
    1)  从程序设计语言的理论上:局部内部类(即:定义在方法中的内部类),由于本身就是在方法内部(可出现在形式参数定义处或者方法体处),因而访问方法中的局部变量(形式参数或局部变量)是天经地义的.是很自 ...
    
			
    8. 
						
  8. Ubuntu中APache+mod_pyhon
			
    安装apache 1.sudo apt-get install Apache2 Apxs(Apache extension tool既apache扩展模块的工具)的安装: 1.sudo apt-get ...
    
			
    9. 
						
  9. cmake处理多源文件目录的方法
			
    cmake处理源代码分布在不同目录中的情况也很简单,现在假设我们的源代码分布情况如下: 源代码的分布情况 其中src目录下的文件要编译成一个链接库 第一步,项目主目录中的CMakelist.txt 在 ...
    
			
    10. 
						
  10. 对Emlog 6.0 Beta的完整代码审计过程
			
    Emlog 6.0 beta版本,这可能是最后一篇关于PHP语言CMS的代码审计文章,此次将详细记录完整的审计过程. 文章基本上完整记录小东的对此CMS审计过程,或许显得繁琐,但代码审计的过程就是这样 ...
    
			
    11.