Part 12 Angularjs filter by multiple properties
In the example below, we are using multiple search textboxes. As you type in the "Search name" textbox, only the name property is searched and matching elements are displayed. Similarly, as you type in the "Search city" textbox, only the city property is searched and the matching elements are displayed. When the "exact match" checkbox is checked, an exact match search is performed.
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">
<input type="text" placeholder="Search name" ng-model="searchText.name" />
<input type="text" placeholder="Search city" ng-model="searchText.city" />
<input type="checkbox" ng-model="exactMatch" /> Exact Match
<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 : exactMatch">
<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;
}
The following example has a single search textbox, and is used to search multiple properties - name and city.
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; $scope.search = function (item) {
if ($scope.searchText == undefined) {
return true;
}
else {
if (item.city.toLowerCase()
.indexOf($scope.searchText.toLowerCase()) != -1 ||
item.name.toLowerCase()
.indexOf($scope.searchText.toLowerCase()) != -1) {
return true;
}
} return false;
};
});
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 city & name"
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: search">
<td> {{ employee.name }} </td>
<td> {{ employee.gender }} </td>
<td> {{ employee.salary }} </td>
<td> {{ employee.city }} </td>
</tr>
</tbody>
</table>
</div>
</body> </html>
Part 12 Angularjs filter by multiple properties的更多相关文章
- AngularJS filter:search 是如何匹配的 ng-repeat filter:search ，filter:{$:search}，只取repeat的item的value 不含label
1. filter可以接收参数,参数用 : 进行分割,如下: {{ expression | filter:argument1:argument2:... }} 2. filter参数是 对象 ...
- angularjs filter 详解
系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter.如果对smarty比较熟悉的话,学习angularjs会比较容易一点.这 ...
- AngularJS Filter用法详解【转+实际测试】 格式化货币
AngularJS内建了一些常用的Filter,我们一一来看一下. currencyFilter(currency): 用途:格式化货币 方法原型: function(amount, currency ...
- angularjs filter详解
过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果. 主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等. ng内置了一些过滤器, ...
- 转载 angularJS filter 过滤器
angularjs中的filter(过滤器) 标签: angularjsfilter 源文地址:http://www.ncloud.hk/技术分享/angularjs中的filter-过滤器/ f ...
- AngularJs filter 过滤器
Filter Ng里的过滤器. currency:把一个数字格式化成货币模式(如$1,234.56).当没有提供任何货币符号时,默认使用当前区域的符号. 使用: HTML:{{ currency_ex ...
- angularjs filter cut string
angular.module('App.controllers.MyCtrl', []) .controller('MyCtrl', function (my) {}) .filter('cut', ...
- 12、Filter（拦截器）
一.过滤器(Filter):又称拦截器.实现Filter接口的类我们称之为Filter(过滤器或拦截器),Filter可以对用户访问的资源进行拦截.例如:客户端发送请求是,先将请求拦截下来,判断用户是 ...
- AngularJs filter 过滤器基础【转】
Filter Ng里的过滤器. currency:把一个数字格式化成货币模式(如$1,234.56).当没有提供任何货币符号时,默认使用当前区域的符号. 使用: HTML:{{ currency_ex ...
随机推荐
- Linux错误代码
#ifndef _I386_ERRNO_H #define _I386_ERRNO_H #define EPERM 1 /* Operation not permitted */ #define EN ...
- 新唐M0 ISP下载要点
http://blog.csdn.net/rejoice818/article/details/7736029 一.注意:官方光盘内“Software Utilities”目录下,可找到ICP或ISP ...
- Linux(Centos)配置OpenSSH无密码登陆<转>
最近在搭建Hadoop环境需要设置无密码登陆,所谓无密码登陆其实是指通过证书认证的方式登陆,使用一种被称为"公私钥"认证的方式来进行ssh登录. " 公私钥" ...
- Looksery Cup 2015 A. Face Detection 水题
A. Face Detection Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/549/pro ...
- UVA 12901 Refraction 几何/大雾题
Refraction Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest/view.a ...
- 64位ubuntu下装32位软件
本帖最后由 wuy069 于 2013-10-25 12:28 编辑 很多软件只有32位的,有的依赖32位库还挺严重的:从ubuntu 13.10已经废弃了ia32-libs,但可以使用多架构,安装软 ...
- MeetMe
- Gridview全选
1.js代码 <script language="javascript" type="text/javascript"> ...
- JS同名方法，
JS同名方法只会调用最后一个方法. JS中同时绑定多个事件,先绑定的先调用.后绑定的后调用.
- mobile响应式页面meta信息相关记录
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scal ...