<!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. bzoj 4506: [Usaco2016 Jan]Fort Moo
			
    4506: [Usaco2016 Jan]Fort Moo Description Bessie is building a fort with her friend Elsie. Like any  ...
    
			
    2. 
						
  2. 简单的INI解析封装
			
    简单封装的一个ini解析处理类(支持跨平台).支持功能: 加载并解析指定ini文件中的配置: 读取指定 section 下的指定 key 的值.提示:支持按数值型读取,或按文本类型读取:使用示例: a ...
    
			
    3. 
						
  3. Spring注解@Primary的意思
			
    @Primary:在众多相同的Bean中,优先使用@Primary注解的Bean. 这个和@Qualifier有点区别,@Qualifier指的是使用哪个Bean进行注入. 参考: http://bl ...
    
			
    4. 
						
  4. Oracle 11gR2 RAC的两个bug
			
      Oracle 11.2.0.2 bug还是不少的.很多库迁到Oracle 11.2.0.2后都遇到了问题.现在正在跟的两个Oracle 11.2.0.2上的问题:1.ORA-00600: inte ...
    
			
    5. 
						
  5. HTTPS 信任证书
			
    使用HttpsURLConnection访问HTTPS链接时一般需要引入证书,否则会产生异常. 但是也可以使用信任所有证书的方式来达到访问的目的. 经上网查询资料发现一个很好用的类来实现信任所有证书的 ...
    
			
    6. 
						
  6. 一个简单的WebService服务
			
    现在,网上提供的免费的webservice服务的网站: http://www.webxml.com.cn/ 从扩展名上看,是 .net构建的网站. 看看功能的实现效果: 需求:我们要远程调用手机号归属 ...
    
			
    7. 
						
  7. Kubernetes下的Redis主从配置架构
			
    文章看了一大堆,但都是直接从各种地方直接拉master,slave镜像,没有交代这些镜像如何构建出来的 好把,我这篇就讲讲这些master,slave镜像如何做成. 先得找到一个标准的redis镜像, ...
    
			
    8. 
						
  8. extern用法
			
    Extern用法 用例子给你示范 // 1.cpp ; // 2.cpp 注意没有包含1.cpp #include <iostream> using namespace std; exte ...
    
			
    9. 
						
  9. 十二.spring-boot使用spring-boot-freemarker
			
    ①.在springMVC中:它代表着view层组件 ②.为什么使用freemarker:简单容易学.逻辑分明 ③.freemarker优点:它不依赖servlet.网络或者web环境 一.创建一个ma ...
    
			
    10. 
						
  10. spfile 和用户环境变量 和export
			
    RAC数据库环境变量设置 [oracle@rac1 ~]$ sqlplus / as sysdba  SQL*Plus: Release 10.2.0.1.0 - Production on Fri  ...
    
			
    11.