In the example below, we are using multiple search textboxes. As you type in the "Search name" textbox, only the name property is searched and matching elements are displayed. Similarly, as you type in the "Search city" textbox, only the city property is searched and the matching elements are displayed. When the "exact match" checkbox is checked, an exact match search is performed.

Script.js :

  1.  var app = angular
  2.         .module("myModule", [])
  3.         .controller("myController", function ($scope) {
  4.  
  5.             var employees = [
  6.                 { name: "Ben", gender: "Male", salary: 55000, city: "London" },
  7.                 { name: "Sara", gender: "Female", salary: 68000, city: "Chennai" },
  8.                 { name: "Mark", gender: "Male", salary: 57000, city: "London" },
  9.                 { name: "Pam", gender: "Female", salary: 53000, city: "Chennai" },
  10.                 { name: "Todd", gender: "Male", salary: 60000, city: "London" },
  11.             ];
  12.  
  13.             $scope.employees = employees;
  14.         });

HtmlPage1.html :

  1.  <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title></title>
  5.     <script src="Scripts/angular.min.js"></script>
  6.     <script src="Scripts/Script.js"></script>
  7.     <link href="Styles.css" rel="stylesheet" />
  8. </head>
  9. <body ng-app="myModule">
  10.     <div ng-controller="myController">
  11.         <input type="text" placeholder="Search name" ng-model="searchText.name" />
  12.         <input type="text" placeholder="Search city" ng-model="searchText.city" />
  13.         <input type="checkbox" ng-model="exactMatch" /> Exact Match
  14.         <br /><br />
  15.         <table>
  16.             <thead>
  17.                 <tr>
  18.                     <th>Name</th>
  19.                     <th>Gender</th>
  20.                     <th>Salary</th>
  21.                     <th>City</th>
  22.                 </tr>
  23.             </thead>
  24.             <tbody>
  25.                 <tr ng-repeat="employee in employees | filter: searchText : exactMatch">
  26.                     <td> {{ employee.name }} </td>
  27.                     <td> {{ employee.gender }} </td>
  28.                     <td> {{ employee.salary  }} </td>
  29.                     <td> {{ employee.city  }} </td>
  30.                 </tr>
  31.             </tbody>
  32.         </table>
  33.     </div>
  34. </body>
  35. </html>

Styles.css

  1.  body {
  2.     font-family: Arial;
  3. }
  4.  
  5. table {
  6.     border-collapse: collapse;
  7. }
  8.  
  9. td {
  10.     border: 1px solid black;
  11.     padding: 5px;
  12. }
  13.  
  14. th {
  15.     border: 1px solid black;
  16.     padding: 5px;
  17.     text-align: left;
  18. }

The following example has a single search textbox, and is used to search multiple properties - name and city.

Script.js :

  1.  var app = angular
  2.         .module("myModule", [])
  3.         .controller("myController", function ($scope) {
  4.  
  5.             var employees = [
  6.                 { name: "Ben", gender: "Male", salary: 55000, city: "London" },
  7.                 { name: "Sara", gender: "Female", salary: 68000, city: "Chennai" },
  8.                 { name: "Mark", gender: "Male", salary: 57000, city: "London" },
  9.                 { name: "Pam", gender: "Female", salary: 53000, city: "Chennai" },
  10.                 { name: "Todd", gender: "Male", salary: 60000, city: "London" },
  11.             ];
  12.  
  13.             $scope.employees = employees;
  14.  
  15.             $scope.search = function (item) {
  16.                 if ($scope.searchText == undefined) {
  17.                     return true;
  18.                 }
  19.                 else {
  20.                     if (item.city.toLowerCase()
  21.                                  .indexOf($scope.searchText.toLowerCase()) != -1 ||
  22.                         item.name.toLowerCase()
  23.                                  .indexOf($scope.searchText.toLowerCase()) != -1) {
  24.                         return true;
  25.                     }
  26.                 }
  27.  
  28.                 return false;
  29.             };
  30.         });

HtmlPage1.html :

  1.  <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title></title>
  5.     <script src="Scripts/angular.min.js"></script>
  6.     <script src="Scripts/Script.js"></script>
  7.     <link href="Styles.css" rel="stylesheet" />
  8. </head>
  9. <body ng-app="myModule">
  10.     <div ng-controller="myController">
  11.         Search : <input type="text" placeholder="Search city & name"
  12.                         ng-model="searchText" />
  13.         <br /><br />
  14.         <table>
  15.             <thead>
  16.                 <tr>
  17.                     <th>Name</th>
  18.                     <th>Gender</th>
  19.                     <th>Salary</th>
  20.                     <th>City</th>
  21.                 </tr>
  22.             </thead>
  23.             <tbody>
  24.                 <tr ng-repeat="employee in employees | filter: search">
  25.                     <td> {{ employee.name }} </td>
  26.                     <td> {{ employee.gender }} </td>
  27.                     <td> {{ employee.salary  }} </td>
  28.                     <td> {{ employee.city  }} </td>
  29.                 </tr>
  30.             </tbody>
  31.         </table>
  32.     </div>
  33. </body>
  34.  
  35. </html>

Part 12 Angularjs filter by multiple properties的更多相关文章

  1. AngularJS filter:search 是如何匹配的 ng-repeat filter:search ，filter:{$:search}，只取repeat的item的value 不含label

    1.  filter可以接收参数,参数用 : 进行分割,如下: {{ expression | filter:argument1:argument2:... }} 2.   filter参数是 对象 ...

  2. angularjs filter 详解

    系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter.如果对smarty比较熟悉的话,学习angularjs会比较容易一点.这 ...

  3. AngularJS Filter用法详解【转+实际测试】 格式化货币

    AngularJS内建了一些常用的Filter,我们一一来看一下. currencyFilter(currency): 用途:格式化货币 方法原型: function(amount, currency ...

  4. angularjs filter详解

    过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果. 主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等. ng内置了一些过滤器, ...

  5. 转载 angularJS filter 过滤器

    angularjs中的filter(过滤器) 标签: angularjsfilter   源文地址:http://www.ncloud.hk/技术分享/angularjs中的filter-过滤器/ f ...

  6. AngularJs filter 过滤器

    Filter Ng里的过滤器. currency:把一个数字格式化成货币模式(如$1,234.56).当没有提供任何货币符号时,默认使用当前区域的符号. 使用: HTML:{{ currency_ex ...

  7. angularjs filter cut string

    angular.module('App.controllers.MyCtrl', []) .controller('MyCtrl', function (my) {}) .filter('cut', ...

  8. 12、Filter（拦截器）

    一.过滤器(Filter):又称拦截器.实现Filter接口的类我们称之为Filter(过滤器或拦截器),Filter可以对用户访问的资源进行拦截.例如:客户端发送请求是,先将请求拦截下来,判断用户是 ...

  9. AngularJs filter 过滤器基础【转】

    Filter Ng里的过滤器. currency:把一个数字格式化成货币模式(如$1,234.56).当没有提供任何货币符号时,默认使用当前区域的符号. 使用: HTML:{{ currency_ex ...

随机推荐

  1. IAR EWARM PRINTF/SCANF FORMATTER

    The linker automatically chooses an appropriate formatter for printf- and scanf-related function bas ...

  2. [转]iOS应用性能调优的25个建议和技巧

    写在前面 本文来自iOS Tutorial Team 的 Marcelo Fabri,他是Movile的一名 iOS 程序员.这是他的个人网站:http://www.marcelofabri.com/ ...

  3. XPath具体解释

    New Document 相关读书笔记.心得文章列表 一.结点类型 XPath中有七种结点类型:元素.属性.文本.命名空间.处理指令.凝视以及文档节点(或成为根节点). 文档的根节点即是文档结点:相应 ...

  4. map的实现

    1.map的实现是使用平衡树,AVL树或者红黑树. 2.在无序的情况下,查找为常数时间.有序的时候,查找为对数时间.二叉排序树(BST)就是为了解决这个问题. 3.但是,极端情况下,BST的查找效率退 ...

  5. IIS 7.0 and Web Farms

    1. IIS 6 IIS 6.0 was capable of scaling out to virtually any number of web servers and had tools lik ...

  6. C#类的成员初始化顺序

    首先我们来看看引用类型的成员初始化过程 我们来看一个例子吧 class Program {     static void Main(string[] args)     {         Driv ...

  7. Azure编程笔记（1）：序列化复杂类型的TableEntity字段

    内容提要 在使用MicrosoftAzure的CloudTable存储数据时,我们先要把数据定义成TableEntity的子类.假设TableEntity中包括复杂类型(比方容器类型如List等.或者 ...

  8. 引入第三方库错误Undefined symbols for architecture i386: _OBJC_CLASS_$的解决方案

    引起标题上所导致的错误是因为你的第三方库没有放入到Compile Sources里面去. 需要到你项目的Targets>>Build Phases>>Compile Sourc ...

  9. 计算运行时间工具timeit

    Table of Contents 1. timeit的功能和用法 2. 其它 3. 参考资料 timeit的功能和用法 timeit 模块提供了测试一小段代码运行时间的功能.我前面有一篇文章用它来测 ...

  10. Linux分区有损坏修复

    如果Linux分区有损坏情况,启动有问题,不能正常进入文本或图形界面.那么一般会出现提示,需要输入Root密码登录后采用fsck -t ext3 -r /usr/local 修复 , /usr/loc ...