Part 11 Search filter in AngularJS
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的更多相关文章
- 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 ...
- ArcEngine中IFeatureClass.Search(filter, Recycling)方法中Recycling参数的理解
转自 ArcEngine中IFeatureClass.Search(filter, Recycling)方法中Recycling参数的理解 ArcGIS Engine中总调用IFeatureCla ...
- AngularJS filter:search 是如何匹配的 ng-repeat filter:search ,filter:{$:search},只取repeat的item的value 不含label
1. filter可以接收参数,参数用 : 进行分割,如下: {{ expression | filter:argument1:argument2:... }} 2. filter参数是 对象 ...
- AngularJS的运用
前 言 JRedu AngularJS[1] 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.A ...
- AngularJS快速入门指南20:快速参考
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
- angularjs 学习小结
1.过滤器的使用 <!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> ...
- AngularJS过滤排序思路
本篇主要整理使用AngularJS进行过滤排序的思路. 在controller中,$scope的persons字段存储数组. $scope.persons = [ { "name" ...
- AngularJS:自定义过滤器
表达式: {{ expression | filter1 | filter2 | ... }} {{ expression | filterName : paramet ...
- Netsuite SuiteScript > Search Advance feature,搜索中使用 'OR' operation
Sample in online help //Define search filter expression var filterExpression = [ [ 'trandate', 'onOr ...
随机推荐
- EWARM STM32 向量表偏移设置
system_stm32f2xx.c #ifdef VECT_TAB_SRAM SCB->VTOR = SRAM_BASE | VECT_TAB_OFFSET; /* Vector Table ...
- 正则表达式_删除字符串中的任意空格(Regex)
直接用 -split,默认以空白分隔.-split $a 用正则表达式中的 \s,-replace -split中都可以直接使用正则表达式,select-string也可以 split 和 join ...
- 内网能PING通TELNET通不能访问解决
遇到一个离奇故障,内网,两个主机在同一IP段内,能互相PING通,TELNET对方的WEB服务器端口,通. 但用IE访问时不能,显示HTTP400.这明显是客户端系统的问题啊!但如何解决呢?我强烈怀疑 ...
- UVALive 4222 Dance 模拟题
Dance 题目连接: https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&pag ...
- Codeforces Round #181 (Div. 2) A. Array 构造
A. Array 题目连接: http://www.codeforces.com/contest/300/problem/A Description Vitaly has an array of n ...
- Codeforces Round #190 (Div. 2) E. Ciel the Commander 点分治
E. Ciel the Commander Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://www.codeforces.com/contest ...
- 即时通信(RPC)的Rtmp实现--代码实现篇
实现的一般步骤是: step 1: 定义NetConnection对象连接rtmp,并监听NetStatusEvent.NET_STATUS事件 step 2: 在NetStatusEvent.NET ...
- [Angular2 Router] Configuring a Home Route and Fallback Route - Learn An Essential Routing Concept
In this tutorial we are going to learn how to configure the Angular 2 router to cover some commonly ...
- [Express] Level 5: Route Instance -- refactor the code
Route Instance Let's rewrite our cities routes using a Route Instance. Create a new Route Instance f ...
- IIS配置相关
转:让Windows Server 2008 + IIS 7+ ASP.NET 支持10万并发请求 http://www.cnblogs.com/dudu/archive/2009/11/10/160 ...