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. .Net Core 常见问题整理

    1.安装时报0x80070490 找不到元素 这里应该是vs只装了web没有装c++ 下载一个 VC_redist.x64.exe 安装就行了 https://github.com/dotnet/co ...

  2. Excel教程(3) - 函数输入方法

    对 Excel 公式而言,函数是其中的主要组成部分,因此公 式输入可以归结为函数输入的问题. "插入函数"对话框 "插入函数"对话框是 Excel 输入公式的重 ...

  3. c/c++常用的几个关键字总结

    一.volatile volatile提醒编译器它后面所定义的变量随时都有可能改变,因此编译后的程序每次需要存储或读取这个变量的时候,都会直接从变量地址中读取数据.如果没有volatile关键字,则编 ...

  4. Cash Machine

    Problem Description A Bank plans to install a machine for cash withdrawal. The machine is able to de ...

  5. Fiddler AutoResponder正则替换

    今天感冒,写简单些. Fiddler AutoResponder正则替换: regex:(?inx).+20150826_1_1_386.mp4/playlist.m3u8.*$ .表示任意字符 *: ...

  6. bootstrap ch2清除浮动+12

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

  7. bootstrap开始咯

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

  8. [NPOI2.0] 使用NPOI读取和导出Excel文件

    先来说下一直使用的 Microsoft.Office.Interop.Excel ,在系统正式使用时遇到的问题 1:Excel读取数据BUG 由于使用Microsoft.Office.Interop. ...

  9. Java 微信登录授权后获取微信用户信息昵称乱码问题解决

    String getUserInfoUrl = "https://api.weixin.qq.com/sns/userinfo?access_token="+access_toke ...

  10. ios设置textField只能输入数字用于电话号码

    首先在.xib中将UITextField的Keyboard设置为Number Pad,但是使用时键盘会切回别的键盘无法对内容进行校验.通过神奇的百度我知道了通过以下方法可以解决这样的问题: 首先让.x ...