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. DCEF3 相关资料

    DCEF3 调用 js http://www.cnblogs.com/Delphi-Farmer/p/4103708.html interface uses ceflib;//其它 type //这里 ...

  2. Codeforces Round #180 (Div. 2) A. Snow Footprints 贪心

    A. Snow Footprints 题目连接: http://www.codeforces.com/contest/298/problem/A Description There is a stra ...

  3. 网易新闻优化APK下载链接

    你好,欢迎你的访问! 本次是APK包的下载链接: 点我下载 这是我目前实现的效果,正在完善中...

  4. 使用NPOI导出DataTable到Excel

    使用C#对DataTable导出到Excel是我们工作当中比较多用到的场景,微软提供了Microsoft.Office.Interop.Excel组件可以进行操作,但是该组件在数据量大的时候速度很慢, ...

  5. [AngularJS] Best Practise - Controller

    ControllerAs: Use thecontrollerAs syntax always as it aids in nested scoping and controller instance ...

  6. 教你用Cocosdx导出安卓安装文件（.apk）（一）

    我也是刚弄出来,过程可能有点混乱和不具体,我尽我所能写完整.各位看官多多包涵 设备环境: 我所用的是mac 10.8.5    64位 Cocosdx-3.0rc2 xcode 5.0 一.准备 ND ...

  7. 0c-35-自动释放池使用注意

    .autorelease使用注意 )并不是放到自动释放池中,都会自动加入到自动释放池 1.1) 因为没有调用autorelease方法,所以对象没有加入到自动释放池. int main(){ @aut ...

  8. win7+iss7的配置，以及如何在本地IIS服务器挂载一个网站

    虽然学过在XP安装IIs服务器和在IIS服务器挂载网站的东西,但是win7和XP的方式还是有许多不同的.废话不说直接进入正题 在本地安装IIS服务器 在IIS服务器中添加你的项目 将你项目的首页设置为 ...

  9. mysql官方示例数据库

    employees数据库:http://ari.iteye.com/blog/1066690  https://launchpad.net/test-db/employees-db-1/1.0.6

  10. PHP｜开发必知的良好实践

    过滤.验证.转义 所有这些外部资源都不能完全相信 $_GET $_POST $_REQUEST $_COOKIE $argv php://stdin php://input file_get_cont ...