Please enable Javascript for better experience...
AngularJS: apply condition in filter in ng-repeat
By Big | Feb 17, 2016 | In Tips | Total Views [ 4880 ]
Taged In
(2 Like)
Rate

You can add condition to ng-repeat using filter option in angularjs.

Introduction

If you have a data with multiple records and want to separate it using condition in ng-repeat, use filter option in angularjs. In below example I have explained, how you can use filter to display a set of record conditionally.

Code

Below is the JSON data which will be used to display records using different conditions.

$scope.SampleJSONList = [
{ "Name": "Rahul", "Age": 20, "IsActive":true },
{ "Name": "Dee John", "Age": 16, "IsActive": true },
{ "Name": "Shaila", "Age": 24, "IsActive": false },
{ "Name": "XYZ", "Age": 30, "IsActive": true },
{ "Name": "Tom", "Age": 40, "IsActive": true },
{ "Name": "Pranay", "Age": 23, "IsActive": false },
{ "Name": "Rahul", "Age": 20, "IsActive": false }
];

Condition using filter option

You can add condition on attribute inside filter enclosed in curly braces. But it only match the content on the basis of your search.

ng-repeat="item in List | filter: {condition}"

I am adding condition on IsActive attribute IsActive = true. It will fetch all the record where column IsActive is true.

<div class="width50">
<table class="webGrid">
<tr>
<th>Name</th>
<th>Age</th>
<th>Is Active</th>
</tr>
<tr data-ng-repeat="item in SampleJSONList | filter: {IsActive: true}">
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>

Here is the output.

If I change condition to fetch record where IsActive = false, it will fetch all the records where column values are set to false.

<div class="width50">
<table class="webGrid">
<tr>
<th>Name</th>
<th>Age</th>
<th>Is Active</th>
</tr>
<tr  data-ng-repeat="item in SampleJSONList" ng-if="item.Age >20 && item.IsActive === true">
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>

Output:

Condition using ng-if

You can add condition using ng-if also and this is effective too. You can apply any condition to your list using ng-if attribute. In below example, I have put condition where Age > 20 and IsActive is true. ng-repeat will fetch all records which full fill this scenario.

<div class="width50">
<table class="webGrid">
<tr>
<th>Name</th>
<th>Age</th>
<th>Is Active</th>
</tr>
<tr data-ng-repeat="item in SampleJSONList" data-ng-if="item.Age > 20 && item.IsActive === true">
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>

Output:

Hope this helps you. Please like, rate and share this article and please don't forget to write your comments/suggestions in comment section below. It helps us improving quality of article and motivate us to write more.

Share this

About the Author

Big
Rahul Jha (Big)
Founder, Developer dotnet-concept.com
Has working experience in different phases of Software Development Life Cycle (SDLC) in CMS, Gaming, Health Care and Financial Services domain using Agile pattern. Working experience in Design patterns, ASP.NET, MVC, Windows application, WCF, ADO.NET, SQL Server and Test Driven Development (TDD) environment with JQuery, JavaScript, N-Unit, Entity Frameworks, LINQ, Code Refactoring and Business Objects Models.

 
Please SignUp/Login to comment...

Or comment as anonymous...
* Name
* Email ID
Comment