1. 3种过滤方式

 <html>

   <head>

     <meta charset='utf-8'>

     <script src="js/angular.js"></script>

     <script src="js/app.js"></script>

     <link rel="stylesheet" href="css/bootstrap.css">

   </head>

   <body ng-app="MyApp">

     <div ng-controller="MyCtrl">

       <h3>Filter by String</h3>

       <form class="form-inline">

         <input ng-model="query" type="text" placeholder="Filter by name" autofocus>

       </form>

       <ul ng-repeat="friend in friends | filter: query | orderBy: 'name' ">

         <li>{{friend.name}} ({{friend.age}})</li>

       </ul>

     </div>

     <div ng-controller="MyCtrl">

       <h3>Filter by Object</h3>

       <form class="form-inline">

         <input ng-model="query" type="text" placeholder="Filter by name and age=20">

       </form>

       <ul ng-repeat="friend in friends | filter: { name: query, age: '20' } | orderBy: 'name' ">

         <li>{{friend.name}} ({{friend.age}})</li>

       </ul>

     </div>

     <div ng-controller="MyCtrl">

       <h3>Filter by Predicate Function</h3>

       <ul ng-repeat="friend in friends | filter: filterFunction | orderBy: 'name' ">

         <li>{{friend.name}} ({{friend.age}})</li>

       </ul>

     </div>

   </body>

 </html>
 var app = angular.module("MyApp", []);

 app.controller("MyCtrl", function($scope) {

   $scope.friends = [

     { name: "Peter",   age: 20 },

     { name: "Pablo",   age: 55 },

     { name: "Linda",   age: 20 },

     { name: "Marta",   age: 37 },

     { name: "Othello", age: 20 },

     { name: "Markus",  age: 32 }

   ];

   $scope.filterFunction = function(element) {

     return element.name.match(/^Ma/) ? true : false;

   };

 });

3种过滤方式，第一种——

根据变量过滤。

第一个过滤中，我们对着input使用了ng-model，使得过滤条件中添加了filter: query

乍一看没什么问题，运行起来也还可以，但是问题是当我们输入数字的时候，连后面的年龄也会变成搜索条件，如果对象中的属性只有几个还好说，一旦多起来，这个过滤根本就是不可行的。

【所以我们需要将滤过变得更加精确。】

结果就是第二个过滤，根据对象提供的条件进行过滤，过滤条件变成了对象filter: { name: query, age: '20' }，这便使得我们过滤的更加方便和精确。

第三种过滤方法是通过函数进行过滤。

当我们对着filter：进行修改，将值改成true的时候，你会发现没有一个符合的数值出现，而改为false，就会出现所有的信息。于是，只要我们创建一个判断函数，这个函数需要带入判断对象作为参数并返回一个布尔值，那么这个函数就可以当过滤器使用了，并且，由于是个函数，所以过滤机制便可以写的复杂的多。

js框架——angular.js（5）的更多相关文章

  1. js框架——angular.js(6)

    1. ng-class 这个指令是用来绑定一个或者多个css代码.它的值一般是一个表达式,也可以是函数什么的,只要返回的确实是一个类的名字就可以—— ng-class="nextPageDi ...

  2. js框架——angular.js

    这是一个前端用的框架,使用简单.详细介绍这里就不写了,主要介绍其语法和作用—— 1. 声明一个angular 如果想要使用一个angular代码,则需要在[想要使用angular的范围内写上ng-ap ...

  3. js框架——angular.js（2）

    1. 模块的利用扩充 模块的名称也可以当做变量使用,例如: <body ng-app> <label><input type="checkbox" n ...

  4. js框架——angular.js(4)

    1. angular中的对象 其实也不用多说的,前台是可以提取后台定义的对象的—— <body ng-app="MyApp"> <div ng-controlle ...

  5. js框架——angular.js（3）

    1. 过滤filter 过滤就是将内容进行筛选或者转换或者两者都有,一般的表示方式就是在变量后面添加"|",然后加上过滤条件,如—— {{name|currency}} 这个cur ...

  6. 青出于蓝而胜于蓝 — Vue.js对Angular.js的那些进步

    Angular.js与Vue.js是非常有渊源的两款前端框架,据Vue.js的官方网站描述,在其早期开发时,灵感来源就是Angular.js.而在很多方面,Vue.js也正像是中国的那句古话,&quo ...

  7. Electron、Node.js、JavaScript、JQuery、Vue.js、Angular.js,layui,bootstrap

    转载:https://blog.csdn.net/meplusplus/article/details/79033786 layui :是基于jquery库的封装开发. bootstrap:同样基于 ...

  8. vue.js与angular.js的区别（个人）

    刚进入实训 讲师就要发一些什么比较高大上的东西,本人才疏学浅  浅浅的分享一下angularjs 和vue.js的区别.只是简单的理解一下 大神勿喷. 生实训之前学习的angular.js 只是理解了 ...

  9. Angular JS - 5 - Angular JS 模块和控制器

    1.引入 1.5版本的angularjs,直接打印angular对象: --> <!DOCTYPE html> <html> <head lang="en ...

随机推荐

  1. WTL 设置 SDI 主窗口初始大小的方法

    在窗口创建之前添加一段代码 一般窗口创建函数为 wndMain.CreateEx(); 在此函数前添加 1: RECT rect = {x, y, width, height}; 然后将创建窗口函数改 ...

  2. Openjudge-计算概论（A）-求出e的值

    描述: 利用公式e = 1 + 1/1! + 1/2! + 1/3! + ... + 1/n! 求e .输入输入只有一行,该行包含一个整数n(2<=n<=15),表示计算e时累加到1/n! ...

  3. javascript动画效果之透明度(修改版)

    在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...

  4. android 编译的原理介绍

    http://blog.csdn.net/mr_raptor/article/details/7540066

  5. Qt主窗体显示最前

    在delphi中使用Application.BringToFront;可以保证当前程序显示在最前. 然而今天在Qt中,没有类似函数供调用. 尝试了activeWindow,show,showNorma ...

  6. .Net_用控制台程序打印指定行数的三角型（面试题）

    .Net_用控制台程序打印指定行数的三角型(面试题)   下面是一个由*号组成的4行倒三角形图案.要求: 1.输入倒三角形的行数,行数的取值3-21之间,对于非法的行数,要求抛出提示“非法行数!”: ...

  7. 3. Shell 基本运算符

    1. 概述 1.1 Shell 支持多种运算符,包括以下几种 算数运算符 关系运算符 布尔运算符 字符串运算符 文件测试运算符 1.2 原生bash不支持简单的数学运算,但是可以通过其他命令来实现,例 ...

  8. 安卓Activity组件

     Activity生命周期 熟悉javaEE的朋友们都了解servlet技术,我们想要实现一个自己的servlet,需要继承相应的基类,重写它的方法,这些方法会在合适的时间被servlet容器调用.其 ...

  9. Windows常用的监视数据指标

  10. apt-get 依赖修复

    apt-get cleanapt-get update apt-get -f install dpkg --configure -a