<!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. Hiho----有向图欧拉回路
			
    时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho破解了一道又一道难题,终于来到了最后一关.只要打开眼前的宝箱就可以通关这个游戏了. 宝箱被一种奇怪的机关锁住 ...
    
			
    2. 
						
  2. 打造百度网盘备份利器:自动备份Linux VPS文件和多线程下载百度网盘资源
			
    前一段时间国内的各大网盘百度云盘,金山快盘,360云盘,华为网盘为争夺用户上演空间容量博弈,网盘商们还固执地以为中国的网民都不懂网络技术,可以像某公司那样用一些数字的手段来忽悠用户,参与到网盘商的数字 ...
    
			
    3. 
						
  3. Android Broadcast Security（转）
			
    原文地址:http://drops.wooyun.org/tips/4393 0x00 科普 Broadcast Recevier 广播接收器是一个专注于接收广播通知信息,并做出对应处理的组件.很多广 ...
    
			
    4. 
						
  4. appium+python自动化49-yaml管理定位元素
			
    前言 如何高效管理定位元素,这个是很有学问的问题,也是面试必问的[以下纯属个人观点,勿喷!]. 有的人用xml管理页面定位元素,这种逼格略高,但是小编认为学习成本大,贼麻烦. 有的人提到用excel管 ...
    
			
    5. 
						
  5. ylbtech-LanguageSamples-PartialTypes(部分类型)
			
    ylbtech-Microsoft-CSharpSamples:ylbtech-LanguageSamples-PartialTypes(部分类型) 1.A,示例(Sample) 返回顶部 “分部类型 ...
    
			
    6. 
						
  6. Objective-C:KVO机制
			
    KVO:key value observer 键值对的观察者   功能:给对象属性添加观察者,用来时时监测对象属性值的改变,一旦属性值发生了改变,观察者就做出相应的反应,提醒用户.在应用中,针对MVC ...
    
			
    7. 
						
  7. Windows DiskPart工具使用
			
    启动工具 diskpart 列出磁盘列表 list disk 选择磁盘 select disk 1 转换为GPT分区 convert gpt 列出分区 list partition 清除所有分区 cl ...
    
			
    8. 
						
  8. 各种语言性能（CPU密集型程序）比较
			
    都进行Fib数列计算,计算到n=40的计算时间: 注意:开始,我以为上图中的第二列就是代表C++的性能.但是现在发现,完全不正确. 如果你使用同样的抽象和同样的逻辑去实现同样的代码,C和C++的性能几 ...
    
			
    9. 
						
  9. 【Todo】phantomjs获取动态网页
			
    上面一篇文章,使用了cheerio, http, request等库,来抓取了Lofter上面的美女图片. 但是很多网页是动态渲染的.据了解,Phantom.js 可以获取动态渲染的网页 http:/ ...
    
			
    10. 
						
  10. 2018年3月python传智播客人工智能基础就业班全套视频教程
			
    2018年3月python传智播客人工智能基础就业班全套视频教程 有需要的可以留言留下邮箱.
    
			
    11.