Angularjs filter by multiple properties
In this video we will discuss how to filter by multiple properties in AngularJS.
Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
/ @aarvikitchen5572
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.
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]
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;
};
});
Link for all dot net and sql server video tutorial playlists
https://www.youtube.com/user/kudvenka...
Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspo...