<!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. Problem B: 年龄问题
			
    #include<stdio.h> int xx(int n,int m,int k) { int a; ) { a=k; } else { a=xx(n-,m,k)+m; } retur ...
    
			
    2. 
						
  2. Problem A: 零起点学算法80——逆序输出（数组练习）
			
    #include<stdio.h> int main() { ]; scanf("%d",&n); ;i<=n;i++){ scanf("%d& ...
    
			
    3. 
						
  3. 十一. 图形、图像与多媒体4.Graphics类的绘图方法
			
    Graphics类提供基本绘图方法,Graphics2D类提供更强大的绘图能力.本节讲解Graphics类,下节讲解Graphics2D. Graphics类提供基本的几何图形绘制方法,主要有:画线段 ...
    
			
    4. 
						
  4. [转]jquery后代和子元素的区别
			
    这是<锋利的jquery>书里的内容 <div>     <p>         <span></span>         <a&g ...
    
			
    5. 
						
  5. Web安全测试指南--文件系统
			
    上传: 编号 Web_FileSys_01 用例名称 上传功能测试 用例描述 测试上传功能是否对上传的文件类型做限制. 严重级别 高 前置条件 1.  目标web应用可访问,业务正常运行. 2.  目 ...
    
			
    6. 
						
  6. jquer总结
			
    前端jq总结 选择器********************************************************************** 1,基本选择 器 #id .clss  ...
    
			
    7. 
						
  7. AS3.0 效率优化
			
    1.显示对象:1.1.静态的不需互动的图形,使用Shape对象.(eg:getSize(newShape())=236) 1.2.不需要时间轴的互动图形,使用Sprite对象.(eg:getSize( ...
    
			
    8. 
						
  8. InfluxDB写流程
			
    Influxdb version1.8 HTTP: 0x00000000016d0ce3 in github.com/influxdata/influxdb/coordinator.(*PointsW ...
    
			
    9. 
						
  9. OSG立体模式下动态修改相机远近裁剪面的实现
			
    1. 非立体模式下动态修改相机远近裁剪面 class GLB_DLLCLASS_EXPORT CGlbGlobeClipHandler : public osg::NodeCallback    {  ...
    
			
    10. 
						
  10. mr程序无法输出日志进行调试的解决方法
			
    mr程序无法输出日志进行调试的解决方法 @(Hadoop) yarn开启日志输出设置 在yarn-site.xml文件中添加如下配置: <property> <name>yar ...
    
			
    11.