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. IOS 手机助手及越狱助手推荐

    快装系列 1 快装助手(PC版) http://pc.kuaiapp.cn/ 2 快装越狱助手(PC版)http://www.kuaiapp.cn 3 快装商店(手机版)http://yueyu.ku ...

  2. C#-异常处理:tyr,catch,finally ---ShinePans

    异常处理能够解决诸如一下问题: 数据库连接失败,IO错误,数据溢出,数组下表越界等问题.  总结:我认为在某些easy出错的地方加上 异常处理语句是很明智的选择 finally 是不管怎样都要运行的语 ...

  3. 企业应用架构模式阅读笔记 - Martin Fowler

    1. 数据读取

  4. 浏览器中打开IOS应用并传参

    原创文章,转载请注明 开发中遇到这么一个问题,就是动态地指定联接服务器地址,或其它数据.如果是其它数据还好说一些,可以通过在服务器上获得的方式来弄.但如果服务器地址都需要动态指定的话.那就得另想办法了 ...

  5. innodb_io_capacity >=innodb_lru_scan_depth*inoodb_buffer_pool_instances。与 checkpoint

    innodb_lru_scan_depth:每个缓冲池刷脏页的能力 innodb_io_capacity:  iops inoodb_buffer_pool_instances=8 :缓冲池的个数 . ...

  6. 疑难杂症：org.hibernate.MappingException: Unknown entity，annotation配置Entity类报错

    引言: 夜声人静,外面下着稀里哗啦的雨,周末的晚上,还在键盘上舞动手指. 此刻很感激一个人一篇随笔,感谢xiaochao以及他的<org.hibernate.MappingException: ...

  7. ASP.NET Core环境配置

    一.环境准备 vs2015 update3 下载NET Core Tooling Preview 2 for Visual Studio 2015 (下载地址:https://go.microsoft ...

  8. AllJoyn Bundled Daemon 使用方式研究

    关于AllJoyn不多做介绍,请看官网:www.alljoyn.org/ 0. 问题来源: 应用程序要使用AllJoyn库,就必须启动deamon. 目前有两种方式: 使用standalone形式,单 ...

  9. A标签使用javascript:伪协议

    一.前言 今天,遇到一个别人挖的坑,问题是这样的. 做了一个列表页,可以筛选数据,有很多筛条件.主要是有input复选框和<a>标签两种.如图: 其中房价的筛选条件使用<a>标 ...

  10. Apple Tree(需要预处理的树状数组)

    Apple Tree Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 20335   Accepted: 6182 Descr ...