asked on

Filters using angularjs

Hi Experts,

I am using filters in angularjs and my requirement is I need to filter Users by userID and FullName. I have to show Users as (UserID+FullName) ie. 1234-Roger,5678-Andrew,1000-Boris etc. If I enter "1" in the Search Users text box it should show all the results with 1 ( 1234-Roger, 1000-Boris) and if enter "B" it should show (1000-Boris). Basically I am trying to filter by userid and fullname and am using filter: {UserId.allUsers} , this works fine for if I search by Userid but I want to filter both userid and fullname .How can I achieve this?

filter: {UserId.allUsers} //Working
filter: {UserId.allUsers, FullName.allUsers} //This is not working

<md-input-container>

<input ng-model="allUsers" type="text" placehoder="Search Users">

</md-input-container>

<md-list>

<md-virtual-repeat-container>

<md-list-item md-virtual-repeat="user in employees" | filter: {UserId.allUsers}"
            
</md-virtual-repeat-container>
 
 <p>{{User.UserID +"-" +User.FullName}}</p>

</md-list-item>

</md-list>

Open in new window

Srinivasulu Muppala

Hi, Good Question and simple one,

Yes, you can filter by function when you have more than one filter.

rename $scope.allUsers to $scope.userfilter

add below mentioned filter function to your controller

$scope.filterEmployees = function ()
{
//apply filter on employees such as

return $scope.employees.filter(
function(item){

return item.indexOf($scope.userfilter) > -1 || item.indexOf($scope.FullName) > -1 });

};

replace in view md-virtual-repeat="user in filterEmployees()"

try this solution if any issue let me know.

ksd123

ASKER

I am little bit confused, Can you create a plunker with sample data ?

Srinivasulu Muppala

Hi, Here is the complete code solution for one or more field filters demo.

Note: change the angular.min,js src. <script type="text/javascript" src="[]"></script>

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
	<title>AngularJS application to filter more then one field(s)</title>
	<script type="text/javascript" src="scripts/angular.min.js"></script>
	<style type="text/css">
		table{
			border-collapse: collapse;
			border:1px solid black;
		}
		th, td{
			border:1px solid black;
		}
	</style>
</head>
<body>

	<div ng-controller="userController" >
		<span></span>
		<table  >
			<tr>
				<th colspan="2">Filter by User Id/ First Name</th>
				<th colspan="2"><input type="text" ng-model="filter" /></th>
			</tr>
			<tr>
				<th>User Id</th>
				<th>First Name</th>
				<th>Last Name</th>
				<th>Full Name</th>
			</tr>
			<tr ng-repeat="user in filterUsers()">
				<td>{{user.userId}}</td>
				<td>{{user.firstName}}</td>
				<td>{{user.lastName}}</td>
				<td>{{user.firstName}} {{user.lastName}}</td>
			</tr>
		</table>
	</div>

	<script type="text/javascript">

		var demoApp = angular.module('demoApp', []);

		demoApp.controller('userController', ['$scope', function($scope){
			$scope.filter = '';
			$scope.users = [{userId: 1234, firstName: 'Srinivasulu', lastName: 'Muppala'},

				{userId: 15678, firstName: 'Rajesh', lastName: 'Kanna'},
				{userId: 123847, firstName: 'Aravindhan', lastName: 'Babu'}
			];

			$scope.filterUsers = function(){

				return $scope.users.filter(function(item){ 
					return (item.userId.toString().indexOf($scope.filter) > -1 || item.firstName.toLowerCase().indexOf($scope.filter) > -1)
				}); //end of filter
			}; //end of filterUsers
		}])
	</script>
</body>
</html>

Open in new window

Srinivasulu Muppala

Hi, you can download from my git repository follow link

ASKER CERTIFIED SOLUTION

Srinivasulu Muppala

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ksd123

ASKER

Thank you for your time. We have following code within filterUsers function, can you please explain me what is the value of "item" would be ? ie. for outer function filterUsers() we are not passing any value.

	return $scope.users.filter(function(item){
return (item.userId.toString().indexOf($scope.filter) > -1 || item.firstName.toLowerCase().indexOf($scope.filter) > -1)
}); //end of filter

Open in new window

Srinivasulu Muppala

Hi,

item is an $scope.users each user, you can rename item to user for more clarity.

In outer function we don't need any additional input parameter because we have users collection in controller itself so we can directly apply filter(s) for scope variable using over ng-model filter variable.

i hope this clarify your question.