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 :

 var app = angular

        .module("myModule", [])

        .controller("myController", function ($scope) {

            var employees = [

                { name: "Ben", gender: "Male", salary: 55000, city: "London" },

                { name: "Sara", gender: "Female", salary: 68000, city: "Chennai" },

                { name: "Mark", gender: "Male", salary: 57000, city: "London" },

                { name: "Pam", gender: "Female", salary: 53000, city: "Chennai" },

                { name: "Todd", gender: "Male", salary: 60000, city: "London" },

            ];

            $scope.employees = employees;

        });

HtmlPage1.html :

 <!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="Scripts/angular.min.js"></script>

    <script src="Scripts/Script.js"></script>

    <link href="Styles.css" rel="stylesheet" />

</head>

<body ng-app="myModule">

    <div ng-controller="myController">

        Search : <input type="text" placeholder="Search employees"

                        ng-model="searchText" />

        <br /><br />

        <table>

            <thead>

                <tr>

                    <th>Name</th>

                    <th>Gender</th>

                    <th>Salary</th>

                    <th>City</th>

                </tr>

            </thead>

            <tbody>

                <tr ng-repeat="employee in employees | filter:searchText">

                    <td> {{ employee.name }} </td>

                    <td> {{ employee.gender }} </td>

                    <td> {{ employee.salary  }} </td>

                    <td> {{ employee.city  }} </td>

                </tr>

            </tbody>

        </table>

    </div>

</body>

</html>

Styles.css :

 body {

    font-family: Arial;

}

table {

    border-collapse: collapse;

}

td {

    border: 1px solid black;

    padding: 5px;

}

th {

    border: 1px solid black;

    padding: 5px;

    text-align: left;

}

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. 四月二十五日，bugzilla for CentOS 安装

    Bugzilla for CentOS 5.4 制作人,陈浩 时间:2014.4.25 原创 文件夹 Bugzilla for CentOS 5.4 一. 装系统 1) 新建虚拟机  15G硬盘,51 ...

  2. 最长公共子序列（LCS问题）

    先简单介绍下什么是最长公共子序列问题,其实问题很直白,假设两个序列X,Y,X的值是ACBDDCB,Y的值是BBDC,那么XY的最长公共子序列就是BDC.这里解决的问题就是需要一种算法可以快速的计算出这 ...

  3. zoj3820 Building Fire Stations 树的中心

    题意:n个点的树,给出n-1条边,每条边长都是1,两个点建立防火站,使得其他点到防火站的最远距离最短. 思路:比赛的时候和队友一开始想是把这两个点拎起来,使得层数最少,有点像是树的中心,于是就猜测是将 ...

  4. Android学习笔记之JSON数据解析

    转载:Android学习笔记44:JSON数据解析 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,为Web应用开发提供了一种 ...

  5. LeetCode38 Count and Say

    The count-and-say sequence is the sequence of integers beginning as follows:1, 11, 21, 1211, 111221, ...

  6. .net中的多线程

    一.多线程的概念        什么是进程呢?当一个程序开始运行时,它就是一个进程,进程所指包括运行中的程序和程序所使用到的内存和系统资源.而一个进程又是由多个线程所组成的,线程是程序中的一个执行流, ...

  7. WPF 之 布局（三）

    六.DockPanel DockPanel定义一个区域,在此区域中,您可以使子元素通过描点的形式排列,这些对象位于 Children 属性中.停靠面板其实就是在WinForm类似于Dock属性的元 素 ...

  8. [Java] 使用 Spring 2 Portlet MVC 框架构建 Portlet 应用

    转自:http://www.ibm.com/developerworks/cn/java/j-lo-spring2-portal/ Spring 除了支持传统的基于 Servlet 的 Web 开发之 ...

  9. 【Android Studio使用教程 7】AndroidStudio问题汇总

    FindBugs:Compiler output path for module can not be null. check your module/project settings问题原因 And ...

  10. Android小项目之十 应用程序更新的签名问题

    ------- 源自梦想.永远是你IT事业的好友.只是勇敢地说出我学到! ---------- 按惯例,写在前面的:可能在学习Android的过程中,大家会和我一样,学习过大量的基础知识,很多的知识点 ...