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. PHP中使用CURL（五）

    curl伪造IP和来源 client.php请求server.php client.php <?php $ch = curl_init(); curl_setopt($ch, CURLOPT_U ...

  2. Matlab - 矩阵元素引用

    >> A = [ ; ; ] A = 1. 选择第m行n列的元素 >> A(,) ans = 2. 选择第i列所有元素 >> A(:,) ans = 3. 选择第j ...

  3. chapter9_4 非抢占式的多线程

    协同程序与常规的多线程不同之处:协同程序是非抢占式的. 当一个协同程序运行时,是无法从外部停止它的.只有当协同程序显式地调用yield时,它才会停止. 当不存在抢先时,编程会变得简单很多,无须为同步的 ...

  4. 安装unbuntu系统后改回windows引导的方法

    1.安装EasyBCD 2.点BCD部署 3.分区:选c盘 4.点击编写MBR 5.点编辑引导菜单 6.确定win10后们的是有勾 7.点击保存设置

  5. ubuntu12.04安装openjdk-7

    编译androidL需要使用openjdk-7:使用sudo apt-get install openjdk-7-jdk会出现错误信息. 网上差了一些方法,可以通过更新软件源的方法解决,这里使用了 # ...

  6. ubuntu下打开chm文件

    CHM文件格式是微软1998年推出的基于HTML文件特性的帮助文件系统,以替代早先的WinHelp帮助系统,它在Windows 98中把CHM类型文件称作“已编译的HTML帮助文件”. chm文件因为 ...

  7. gcc及其选项详解 【转载】

    1.简介: gcc是gnu旗舰产品,目前基本上就是和unix捆绑在一起分发的.这个东西功能强大,但是有多达上千个选项,其用户手册也有将近一万行.虽然其中的多数选项平时很少用到.但是不管装软件还是写程序 ...

  8. URL Scheme吊起app实现另外一种登录方式

    https://developer.apple.com/library/content/featuredarticles/iPhoneURLScheme_Reference/Introduction/ ...

  9. Nginx 安装(CentOS )

    一.安装编译工具及库文件 yum -y install make zlib zlib-devel gcc-c++ libtool openssl openssl-devel 二.首先要安装 PCRE ...

  10. Varnish && Varnish Cache

    1 1 1 Varnish https://www.varnish-cache.org/intro/index.html#intro Introduction to Varnish The basic ...