Example of ng-repeat Conditional Filter to bind data in AngularJS

Example of ng-repeat Conditional Filter to bind data in AngularJS

In AngularJS ng-repeat is a frequently used Directive. Like a For loop this Directive works. I mean if you are looking to bind list of records to a HTML Control this directive helps. You must noticed in many case during we binding data using iterations, many times we required to Filter them Conditionally. In such case how we can implement ng-repeat Conditional Filter we are showing this demo in below example.

Here I Created a Customer list inside my controller CustomersCon. $scope.Customers comes with Name & Status fields. Name is the name of Customer & Status is it’s state Active or Inactive. In HTML body I am showing separately Active & Inactive Customers list using ng-repeat directive. To Filter both these status type (Active & Inactive) separately here I used ng-show & ng-hide directives from AngularJS.

For Active customers list here inside ng-repeat I used ng-show=”Customer.Status==’Active'”. Similarly for inactive Customers list I used ng-hide=”Customer.Status==’Active'”. Also the same Filter can be done using ng-if. ng-show, ng-hide or ng-if can be called Conditional Filters in AngularJS. All the three ng-show, ng-hide & ng-if accepts boolean values as True or False. If the value is True it will execute the statement else not. To run this demo copy the below codes to a Notepad file & Save it as a HTML file. Then Open the File in your Browser.

ng-repeat Conditional Filter Demo App

<html ng-app="CustomersMod">
<head>
<title>Example of using conditional filter with ng-repeat?</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script type="text/javascript">
var CustomersMod = angular.module('CustomersMod', []);
CustomersMod.controller('CustomersCon', function ($scope) {
$scope.Customers = [
{'Name': 'Airtel', 'Status': 'Active'},
{'Name': 'Vodafone', 'Status': 'inActive'},
{'Name': 'Aircel', 'Status': 'Active'},
{'Name': 'Microsoft Corporation', 'Status': 'Active'},
{'Name': 'Covansys', 'Status': 'inActive'},
{'Name': 'Infosys', 'Status': 'Active'},
{'Name': 'Intel', 'Status': 'Active'},
{'Name': 'Capgemini', 'Status': 'inActive'},
{'Name': 'Dell', 'Status': 'Active'},
{'Name': 'Intex', 'Status': 'Active'},
{'Name': 'Samsung', 'Status': 'inActive'},
{'Name': 'Nokia', 'Status': 'inActive'},
{'Name': 'Motorola', 'Status': 'Active'}
];
});
</script>
</head>
<body ng-controller="CustomersCon">
List of Customers
<hr />
<b>Active...</b>
<ul>
<li ng-repeat="Customer in Customers" ng-show="Customer.Status=='Active'">{{Customer.Name}}</li>
</ul>
<b>inActive...</b>
<ul>
<li ng-repeat="Customer in Customers" ng-hide="Customer.Status=='Active'">{{Customer.Name}}</li>
</ul>
</body>
</html>