As we type in the search textbox, all the columns in the table must be searched and only the matching rows should be displayed.

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.         Search : <input type="text" placeholder="Search employees"
  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:searchText">
  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. </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.  
  19. }

Part 11 Search filter in AngularJS的更多相关文章

  1. Part 13 Create a custom filter in AngularJS

    Custom filter in AngularJS 1. Is a function that returns a function 2. Use the filter function to cr ...

  2. ArcEngine中IFeatureClass.Search(filter, Recycling)方法中Recycling参数的理解

    转自 ArcEngine中IFeatureClass.Search(filter, Recycling)方法中Recycling参数的理解   ArcGIS Engine中总调用IFeatureCla ...

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

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

  4. AngularJS的运用

      前  言 JRedu AngularJS[1]  诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.A ...

  5. AngularJS快速入门指南20：快速参考

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  6. angularjs 学习小结

    1.过滤器的使用 <!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> ...

  7. AngularJS过滤排序思路

    本篇主要整理使用AngularJS进行过滤排序的思路. 在controller中,$scope的persons字段存储数组. $scope.persons = [ { "name" ...

  8. AngularJS：自定义过滤器

    表达式:         {{ expression | filter1 | filter2 | ... }}         {{ expression | filterName : paramet ...

  9. Netsuite SuiteScript > Search Advance feature，搜索中使用 'OR' operation

    Sample in online help //Define search filter expression var filterExpression = [ [ 'trandate', 'onOr ...

随机推荐

  1. IC开短路测试(open_short_test),编程器测试接触不良、开短路

    http://kitebee.meibu.com/forum.php?mod=viewthread&tid=69654&extra=page%3D5 IC开短路测试(open_shor ...

  2. SAE J1708 DS36277 MAX3444, DS75176B

    http://en.wikipedia.org/wiki/J1708 J1708 SAE J1708 is a standard used for serial communications betw ...

  3. Codeforces Round #306 (Div. 2) E. Brackets in Implications 构造

    E. Brackets in Implications Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/conte ...

  4. Codeforces Round #136 (Div. 1)C. Little Elephant and Shifts multiset

    C. Little Elephant and Shifts Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/pro ...

  5. 基于私钥加密公钥解密的RSA算法C#实现

    RSA算法是第一个能同时用于加密和数字签名的算法,也易于理解和操作. RSA是被研究得最广泛的公钥算法,从提出到现在已近二十年,经历了各种攻击的考验,逐渐为人们接受,普遍认为是目前最优秀的公钥方案之一 ...

  6. Java中类的初始化顺序

    一.一个类的初始化顺序(没继承情况)  规则: 1.静态变量>普通变量>构造方法   2.变量定义的顺序决定初始化的顺序 3.静态变量和静态块是一样的,普通变量和非静态块是一样的,即能够把 ...

  7. [Angular2 Form] Style Validation in Angular 2 Forms

    Inputs using Angular 2’s ngModel automatically apply style classes of .ng-validand .ng-invalid each ...

  8. Memcached概述

    Memcached Memcached是一套分布式的内存对象缓存系统,使用C语言编写,作为数据库的前端cache,缓存数据库查询结果能够减轻数据库负载. 类似一张巨大的hash表,缓存的对象以key- ...

  9. 激活office 2010

    在激活office 2010版本时有的同学可能会用到“mini-KMS_Activator”这个工具,其实这个工具激活成功率并不算高,我就没激活成功.然后就是了另一款自动激活工具“Office 201 ...

  10. innobackupex 备份实验

    [root@localhost ~]# xtrabackup -v xtrabackup version based Linux (x86_64) (revision id: 45cda89) [ro ...