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. JavaScript绘制表格并将内容以JSON返回后台

    只是随手记一下 function printTable() { var aText = []; aText.push("<tr"); aText.push("< ...

  2. [ An Ac a Day ^_^ ] hdu 1662 Trees on the level 数据结构 二叉树

    紫书上的原题 正好学数据结构拿出来做一下 不知道为什么bfs的队列一定要数组模拟…… 还可以练习一下sscanf…… #include<stdio.h> #include<iostr ...

  3. urllib2 之info 学习

    之前介绍了根据old_url获取真实url的geturl的方法,而根据urlopen返回的应答对象的info方法可以获取服务器发送头部headers的内容,并且通过字典形式反馈出来,同样测试代码如下: ...

  4. 【简单学习shell】iptables命令实用

    构造设备离线iptables命令iptables -I INPUT -p all -s 10.71.115.159 -j DROP 断链iptables -I INPUT -p all -s 10.7 ...

  5. kali linux 更新软件源，安装中文输入法，修复Linux与windows引导菜单解决windows引导丢失

    1. 更新软件源打开sources.list文件,进行添加更新源:leafpad /etc/apt/sources.list 2. 添加软件源#官方源 deb http://http.kali.org ...

  6. div盒子水平垂直居中的方法

    这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居中同样的效果,也支持联合可变高度方式使用.内容块定义t ...

  7. OSI参考模型各层的主要功能

    OSI参考模型将整个通信功能划分为7个层次,其划分的主要原则是: 1网络中各主机有相同的层次 2 不同主机的同等层具有相同的功能 3同一主机内相邻层之间通过接口通信 4 每层可以使用下层提供的服务,并 ...

  8. ACE_Event_Handler：事件响应入口

    1:ACE_Event_Handler类 头文件“Event_Handler.h” 在ACE Reactor框架中,ACE_Event_Handler是所有事件处理器的基类.ACE_Event_Han ...

  9. bootstrap开始咯

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  10. windows7所有版本

    windows7所有版本迅雷地址下载集合(含32位和64位) Windows7 SP1旗舰版 32位官方原版下载: ed2k://|file|/cn_windows_7_ultimate_with_s ...