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 ...
随机推荐
- CodeForces 176B Word Cut dp
Word Cut 题目连接: http://codeforces.com/problemset/problem/176/C Description Let's consider one interes ...
- git常见问题
一.设置git的user name和email: git config --global user.name "lei.li" git config --global user.e ...
- 【JavaScript】JavaScript的Function与Object浅析
前言: JavaScript的面向对象是基于原形的,所有对象都有一条属于自己的原型链.Object与Function可能很多看Object instanceof Function , Function ...
- Spark目录
1. Spark1.0.0 应用程序部署工具spark-submit 2. Spark Streaming的编程模型 3. 使用java api操作HDFS文件 4. 用SBT编译Spark的Word ...
- C# 网络通信大小端转换类
本篇文章主要介绍了"C# 网络通信大小端转换类" using System;namespace Framework.NetPackage.Common { /// <summ ...
- Linux清除磁盘上的RAID信息
我的笔记本是DELL的Inspiron 14z,原装存储器是由32G的固态硬盘和512G的机器硬盘组成.后来我自己又给它加了一个256G的固态硬盘,装并装上了CentOS,打算把500G的机械硬盘当资 ...
- poll机制分析
更多文档:http://pan.baidu.com/s/1sjzzlDF linux poll/select用法及在字符驱动中的简单实现 1.poll和select 使用非阻塞I/O 的应用程序常常使 ...
- IIS 之 HTTP 错误 403.14 - Forbidden
错误如下图所示: 其实,这个提示下面已经交代了怎么解决问题,现在告诉大家具体的详细步骤. 方法一:配置" 默认文档 " 方法二:启用" 目录浏览 "
- foundation框架之反射机制
概念 例子 一.概念 反射:根据字符串实例话对象或者调用方法 // // main.m // 反射机制 // // Created by apple on 14-3-28. // Copyright ...
- iphone 手机屏幕和UIView和UIWindowde 的主要的区别
在iPhone5之前的iphone1,2,3,3s,4,4s都是320x480 iPhone5和5s的屏幕是320x568 iphone6的屏幕是375x667 iPhone6Plus的414x736 ...