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. Objective-C运行时编程 - 方法混写 Method Swizzling

    摘要: 本文描述方法混写对实例.类.父类.不存在的方法等情况处理,属于Objective-C(oc)运行时(runtime)编程范围. 编程环境:Xcode 6.1.1, Yosemite,iOS 8 ...

  2. jQuery + jQuery Mobile 实现省市二级下拉列表页面

    一.需求: 提供省.市下拉列表,当用户选择省一级下拉列表项后,市下拉列表的各个选项自动变为该省对应的城市列表. 二.效果: 三.实现: 1.省市json数据,来自: http://www.cnblog ...

  3. LuaFileSystem学习心得

    LuaFileSystem(简称lfs)是一个用于lua进行文件訪问的库,和Lua版本号同步.且是跨平台的,在为lua安装lfs之前须要先安装luarocks, luarocks是一个用于安装lua库 ...

  4. 【JavaScript】apply和call的区别在哪？

    我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家 ...

  5. linux 内核参数VM调优 之 参数调节和场景分析

    1. pdflush刷新脏数据条件 (linux IO 内核参数调优 之 原理和参数介绍)上一章节讲述了IO内核调优介个重要参数参数. 总结可知cached中的脏数据满足如下几个条件中一个或者多个的时 ...

  6. MySQL 5.7 深度解析: JSON数据类型使用

    http://www.actionsky.com/docs/archives/156  2015年12月25日  杨涛涛 JSON (JavaScriptObject Notation) 是一种轻量级 ...

  7. BinaryWriter和BinaryReader用法

      C#的FileStream类提供了最原始的字节级上的文件读写功能,但我们习惯于对字符串操作,于是StreamWriter和 StreamReader类增强了FileStream,它让我们在字符串级 ...

  8. 分布式缓存技术redis学习（四）——redis高级应用（集群搭建、集群分区原理、集群操作）

    本文是redis学习系列的第四篇,前面我们学习了redis的数据结构和一些高级特性,点击下面链接可回看 <详细讲解redis数据结构(内存模型)以及常用命令> <redis高级应用( ...

  9. 优化 App 的启动速度

    App 的启动速度不仅影响我们调试,也直接关系到用户体验.之前有些很久没有打开过的项目,需要花费很长的时间才完成编译:对应的 App 在点击后,许久才出现启动画面.你是否为这些问题苦恼过呢? 这是我观 ...

  10. iOS网络监测如何区分2、3、4G?

    你可以在Github下载这个Demo 首先,引入系统的Reachability类,不知道怎么引入的话,在Xcode,按下shift+command+0,搜索Reachability,看到图中所选的工程 ...