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 ...
随机推荐
- XPath具体解释
New Document 相关读书笔记.心得文章列表 一.结点类型 XPath中有七种结点类型:元素.属性.文本.命名空间.处理指令.凝视以及文档节点(或成为根节点). 文档的根节点即是文档结点:相应 ...
- IOS实用功能之截图（来自相册和拍照）
// // ViewController.m // MyImagePicker1.0 // // Created by Mac on 14-7-14. // Copyright (c) 201 ...
- AndroidManifest.xml 详解 (四) 之uses-permission
The <uses-permission> Element 我们现在告别<application>元素,回到<manifest>中定义的子元素,<uses-p ...
- 分布式缓存技术redis学习（四）——redis高级应用（集群搭建、集群分区原理、集群操作）
本文是redis学习系列的第四篇,前面我们学习了redis的数据结构和一些高级特性,点击下面链接可回看 <详细讲解redis数据结构(内存模型)以及常用命令> <redis高级应用( ...
- Android基本控件之listView(三)<用ListView实现分页加载>
我们之前讨论了ListView的基本使用方法和ListView的优化 今天我们再来讨论一个关于ListView的一个新的东西~就是分页加载.那么什么是分页加载呢?简单点说,就是"下拉刷新&q ...
- JS后退, JS返回上一页, JS返回下一页
Javascript 返回上一页: 1. history.go(-1), 返回两个页面: history.go(-2); 2. history.back(). 3. window.history.fo ...
- Entity Framework之问题收集
本节讨论内容主要针对收集了上篇文章大家碰到问题的讨论解决,会持续收集扩充. DbContext加载原值,当前值,数据库值,属性操作,对象复制,对象值复制(VO,DTO->POCO),复杂对象取值 ...
- C#基础--struct(结构体)
结构体和类有点类似 我们定义一个类的时候 是class 类名 定义结构体的时候是 struct 结构体名 结构体的写法 struct Point { // public int ...
- Keywords Search
Keywords Search Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- 1.5.8 语言分析器(Analyzer)
语言分析器(Analyzer) 这部分包含了分词器(tokenizer)和过滤器(filter)关于字符转换和使用指定语言的相关信息.对于欧洲语言来说,tokenizer是相当直接的,Tokens被空 ...