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

ksd123Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Srinivasulu MuppalaLead DeveloperCommented:
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.
0
ksd123Author Commented:
I am little bit confused, Can you create a plunker  with sample data ?
0
Srinivasulu MuppalaLead DeveloperCommented:
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

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Srinivasulu MuppalaLead DeveloperCommented:
Hi, you can download from my git repository follow link
0
Srinivasulu MuppalaLead DeveloperCommented:
Hi, you can download from my git repository follow link srinipro
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ksd123Author Commented:
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

0
Srinivasulu MuppalaLead DeveloperCommented:
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.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Angular

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.