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. angularjs表单

    <form ng-app="myApp" ng-controller="validateCtrl" name="myForm" nov ...

  2. java的string.split()分割特殊字符时注意点

    [1]单个符号作为分隔符         String address="上海|上海市|闵行区|吴中路";      String[] splitAddress=address.s ...

  3. 关于springboot启动时候报错:springboot Failed to parse configuration class [Application]

    把运行的java类放在一个package下后就不再提示这个错误. 使用的ide是intellij,之前也有因为没有创建package报错的经历,可能这是intellij必须的

  4. Nginx “邪恶” rewrite

    概述 本文主要针对nginx rewrite指令困惑的地方进行讲解,中间会涉及部分原理部分,我尽量用通俗易懂的语言来形容 功能讲解 大致流程 The ngx_http_rewrite_module m ...

  5. Session和Cookie的使用总结

    Session和Cookie的使用总结: Session和cookie都是asp.Net中的内置对象,至于他们有什么区别,在这里就不在多说,现在来说说一些比较实用点的东西: 我们知道网站都有一个后台管 ...

  6. 对SNS网站现状和未来的一些想法——以我对人人网的体验为例

    现在对人人网越来越没有兴趣了,上面的照片.状态也越来越少了,反而是朋友圈里大家比较活跃. 我觉得在网上发内容的,至少是希望得到大家关注的,可是为什么人人越来越被大家嫌弃了呢? 人人上的消息越来越被淹没 ...

  7. AutoTile 自动拼接 番外篇（自动融合技术）

    http://pan.baidu.com/s/1dDQyfSl 密码:ttud 先睹为快吧. 之后 还差一个 智能替换 技术.

  8. 《JavaScript高级程序设计》读书笔记 ---操作符二

    关系操作符 小于(<).大于(>).小于等于(<=)和大于等于(>=)这几个关系操作符用于对两个值进行比较,比较的规则与我们在数学课上所学的一样.这几个操作符都返回一个布尔值, ...

  9. zookeeper入门知识

    ZooKeeper 是什么? ZooKeeper 顾名思义 动物园管理员,他是拿来管大象(Hadoop) . 蜜蜂(Hive) .小猪(Pig)  的管理员, Apache Hbase和 Apache ...

  10. LeetCode OJ 105. Construct Binary Tree from Preorder and Inorder Traversal

    Given preorder and inorder traversal of a tree, construct the binary tree. Note:You may assume that ...