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 ...
随机推荐
- NFS错误Starting NFS quotas: Cannot register service: RPC: Unable to receive; errno=Connection refused
NFS报错一例 [root@bjs0- ~]# /etc/init.d/portreserve start Starting portreserve: ...
- Entity Framework 6 Code First +MVC5+MySql/Oracle使用过程中的几个问题
1. namespace Snapsia.Web.Models { using System; using System.Data.Entity; using System.ComponentMode ...
- DataInputStream和DataOutputStream使用方法细节探讨
DataInputStream和DataOutputStream都是Java中输入输出流的装饰类,用起来非常方便.今天就来讨论一下使用该类时候遇到的编码问题. package com.vince ...
- MyBatis学习练习
转自:http://ccchhhlll1988-163-com.iteye.com/blog/1415621 基本目的:利用Mybatis完成对一个表简单的select.insert.update.d ...
- ios开发——实用技术篇&应用间跳转
应用之间的跳转 说明:本文介绍app如何打开另一个app,并且传递数据. 一.简单说明 新建两个应用,分别为应用A和应用B. 实现要求:在appA的页面中点击对应的按钮,能够打开appB这个应用. 1 ...
- centos 服务器配置(二) 之ftp配置
Centos配置vsftpd服务器 1.通过yum来安装vsftpd [root@localhost ~]# yum -y install vsftpd 加-y是因为出现提示默认直接按Y.这里yum安 ...
- Android精品课程—PullToRefresh 下拉刷新
http://edu.csdn.net/course/detail/1716 TableLayout http://edu.csdn.net/course/detail/2262 Android开发之 ...
- The Kernel Newbie Corner: Kernel Debugging with proc "Sequence" Files--Part 3
转载:https://www.linux.com/learn/linux-career-center/44184-the-kernel-newbie-corner-kernel-debugging-w ...
- 2015 FVDI V6.3 Software Free Download
2015 FVDI with software USB dongle has newly upgraded to V6.3. Here software upgrade list: ABRITES C ...
- cplusplus系列>algorithm>std::for_each
http://www.cplusplus.com/reference/algorithm/for_each/ 对一个序列应用函数.可以是函数指针,或者是functor. // for_each exa ...