<!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. 【Floyd】POJ1125-Stockbroker Grapevine
			
    水题,裸的Floyd.最后要求遍历一遍图的最短路径,只需要枚举将当前每一个点作为起始点.如果它不能到达其中的某一点,则该点不可能作为起始点:否则,由该点开始遍历全图的最短路径是到所有点距离中的最大值. ...
    
			
    2. 
						
  2. idea自动生成spring实体
			
    创建Spring Boot项目 idea创建新项目 File->New->Project选择Spring Initializr默认使用官方的https://start.spring.io/ ...
    
			
    3. 
						
  3. iOS .a静态库的制作及使用
			
    一.制作.a静态库 1.创建静态库工程,工程命名为BaseSDK,生成的.a文件名变成libBaseSDK.
    
			
    4. 
						
  4. mybatis查询日期时间数据得到long类型数据的问题
			
    使用mybatis查询数据时,如果数据库存储的是timestamp.datetime.date.time等时间类型,而Java bean也使用的是date类型,mybatis会自动将date类型转换为 ...
    
			
    5. 
						
  5. jQuery.extend重载合并
			
    使用: var people1 = { apple: 0, banana: { weight: 52, price: 100 }, age: 97 }; var people2 = { banana: ...
    
			
    6. 
						
  6. NGINX -- 详解Nginx几种常见实现301重定向方法上的区别
			
    Nginx下常见的301跳转有以下三种,虽然都能达到同样的目的.但是三种写法上还是有区别的,主要的区别是在正则匹配的性能上. 第一种:使用rewrite指令,通过正则匹配所有的URI后再去掉开头第一个 ...
    
			
    7. 
						
  7. 12.线程通信CyclicBarrier
			
    CountDownLatch 监听某个线程的初始化,等待初始化执行完毕后,通知主线程工作.延迟.阻塞的是主线程,在单个线程中. CyclicBarrier 针对多个线程.线程池,多个线程初始化准备之后 ...
    
			
    8. 
						
  8. 未能加载文件或程序集 Version Culture=neutral, PublicKeyToken=
			
    最近项目报错 未能加载文件或程序集"Microsoft.Practices.EnterpriseLibrary.Data, Version=4.1.0.0, Culture=neutral, ...
    
			
    9. 
						
  9. lua调试的工具选择
			
    近期看到一个关于vs的lua调试插件, 装了vs2012试了下, 忍不住发此文总结下lua各种调试工具 Decoda 这是现今地球上调试lua5.1最方便的工具, 没有之中的一个. 强大的注入式调试, ...
    
			
    10. 
						
  10. （转）nio 连网和异步 I/O
			
    连网和异步 I/O 概述 连网是学习异步 I/O 的很好基础,而异步 I/O 对于在 Java 语言中执行任何输入/输出过程的人来说,无疑都是必须具备的知识.NIO 中的连网与 NIO 中的其他任何操 ...
    
			
    11.