angularjs自定义过滤器

实现一个按输入框中的数据筛选的功能,筛选可按电影的名称、年份、评分

检索框:
 <input type="text" placeholder="可检索名字评分和年份" class="filter" ng-model="data">

  ng-repeat的li:

<ul>
        <li class="moveli" ng-repeat="move in moves|check:data">      //check为过滤器名称,data为绑定的输入框数据
         .....
        <li>
<ul>

  自定义的过滤器:

app.filter("check",function(){
    return function(input,mydata){  //接受的两个参数分别为 input(要过滤的数据),data(输入框输入的数据)
        var show = [];
        if(input){
            for(var i=0;i<input.length;i++){
                if(input[i].title==mydata){
                    show.push(input[i]);
                }else if(input[i].year==mydata){
                    show.push(input[i]);
                }else if(input[i].rating.average==mydata){
                    show.push(input[i]);
                }else if(mydata==‘‘){
                    show.push(input[i]);
                }
            }
            return show;  //返回一个数组
        }
    }
});

  

时间: 2024-10-01 04:40:28

angularjs自定义过滤器的相关文章

创建 AngularJS 自定义过滤器,带自定义参数

Angularjs过滤器是 angularjs非常棒的特性之一.有朝一日,你可能需要使用自定义过滤器,幸运的是,你找到了这篇博文. 下面显示的是自定义过滤器长什么样子(请注意myfilter): <tr ng-repeat="friend in friends |myfilter:'param1':'param2':true:'windowScopedFilter'"> 我们的自定义过滤器叫做 "myfilter", 它有由 ':'隔开的4个参数. 这是

angularJS自定义过滤器、服务和指令

自定义过滤器 1 mainApp.filter('mayfilter',function(){ 2 return function(input){ 3 (过滤逻辑代码) 4 } 5 });   自定义创建指令 1 mainApp.derectiv("derectiveName",function(){ 2 return { 3 restrict:"E", //定义类型:E(元素),C(class),A(属性),M(注释) 4 template:"<p

AngularJs自定义过滤器filter

AngularJs自带有很多过滤器,现在Insus.NET演示一个自定义的过滤器,如实现一个数据的平方. 本演示是在ASP.NET MVC环境中进行. 创建一个app: 创建一个控制器: 接下来是重点,创建一个过滤器,例子中的过滤器是实现一个数值的平方. 以上的所指的App,控制器和过滤器均是依Angularjs而言. 下面是ASP.NET MVC的视图,实现数据过滤: 程序运行结果:

AngularJS 自定义过滤器Filter 问题

在网上看了很多angularJS过滤器的文章,但是觉得写的比较模糊,之前试了好几次都不成功,这次成功了记录一下. App.filter('deployFilter',function(){ return function(value){ switch (value){ case 'UNDEPLOY' : value = '未部署'; break; case 'DEPLOYED' : value = '已部署'; break; default : break; } return value; }

angularjs随笔01 数据双向绑定理解 自定义过滤器 时钟更新列子

1.   数据的双向绑定可以简单的理解为,无论在文本框中输入什么,都会在数据模型中显示出来输入的内容, 双向绑定的模型和数据是进行动态绑定的,实时检查进行修改. <input type="text" ng-model="name"> {{name}} 在上述代码中,通过angular.js将数据模型对象($scope)的name属性与文本模型绑定在一起,然后就实现了在输入框输入什么都会 在文本模型中显示对应的内容,实时更新. 控制器controller,

AngularJS中自定义过滤器

AngularJS中为我们提供了一些内置的过滤器,这里列举一些自定义过滤器的场景. 自定义过滤器,不带参赛 //过滤 不带参赛 app.filter('ordinal', function () { return function (number) { if (isNaN(number) || number < 1) { return number; } else { var lastDigit = number % 10; if (lastDigit === 1) { return numbe

angularJs的过滤器扩展及自定义过滤器

一.过滤器扩展 1.过滤器的组合使用 <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="angular.min.js&

走进AngularJs(七) 过滤器(filter) - 吕大豹

时间 2013-12-15 16:22:00  博客园-原创精华区 原文  http://www.cnblogs.com/lvdabao/p/3475426.html 主题 AngularJS 过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果.主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等.ng内置了一些过滤器,它们是:currency(货币).date(日期).filter(子串匹配).json(格式化json对象).

angularJS自定义那些事

angularJS在数据处理方面很优秀. 使用angularJ给我感觉就像在写模板,然后对模板填入内容,只是这些内容不在是 在html页面编写,而是以数据的方式添加进去,这个也大大提高了编写的效率. 我们的业务逻辑都可以在controller里编写,如DOM操作,数据处理等,还有一些angularJS 内置好的服务和过滤处理,但这些还不够,在开发中,总会有一些angularJS没有的,所以就自定义 服务,自定义指令,自定义过滤器,这些都是很有必要的. 在自定义中,觉得服务的定义方式最多,至少有五