AngularJS Filter Example using JSON
In this tutorial we will learn filter of data using AngularJS:
First create HTML page:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>AngularJS Filter</title>
</head>
<body >
</body>
</html>
Add js File in Head:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
After adding AngularJS file your code look like:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>AngularJS Filter</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
</body>
</html>
when you execute this code nothing happen. you have to call its controller and activate app.
for that add ng-app=”MyApp” to your body.
now we will develop our filter application:
first create a div and in that div add textbox.
<p><input type="text" ng-model="query" style="width: 100%;" placeholder="Type to filter"></p>
now your code looks like:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>AngularJS Filter</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app="MyApp">
<div ng-controller="MyCtrl">
<p><input type="text" ng-model="query" style="width: 100%;" placeholder="Type to filter"></p>
</div>
</body>
</html>
now create table so our result look pretty good
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>AngularJS Filter</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app="MyApp">
<div ng-controller="MyCtrl">
<p><input type="text" ng-model="query" style="width: 100%;" placeholder="Type to filter"></p>
<table border="1" style="border-collapse: collapse; max-width: 100%">
<tr>
<th width="200">Country Name</th>
<th width="200">Currency Code</th>
<th width="200">Fips Code</th>
<th width="200">Country Code</th>
<th width="200">Iso Numeric</th>
<th width="200">North</th>
<th width="200">Capital</th>
<th width="200">Continent Name</th>
<th width="200">Area In Sq Km</th>
<th width="200" style="word-wrap: break-word">Languages</th>
<th width="200">Iso Alpha3</th>
<th width="200">Continent</th>
<th width="200">South</th>
<th width="200">East</th>
<th width="200">Geo name Id</th>
<th width="200">West</th>
<th width="200">Population</th>
</tr>
</table>
</div>
</body>
</html>
Now we call angularJS function to show all data:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>AngularJS Filter</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app="MyApp">
<div ng-controller="MyCtrl">
<p><input type="text" ng-model="query" style="width: 100%;" placeholder="Type to filter"></p>
<table border="1" style="border-collapse: collapse; max-width: 100%">
<tr>
<th width="200">Country Name</th>
<th width="200">Currency Code</th>
<th width="200">Fips Code</th>
<th width="200">Country Code</th>
<th width="200">Iso Numeric</th>
<th width="200">North</th>
<th width="200">Capital</th>
<th width="200">Continent Name</th>
<th width="200">Area In Sq Km</th>
<th width="200" style="word-wrap: break-word">Languages</th>
<th width="200">Iso Alpha3</th>
<th width="200">Continent</th>
<th width="200">South</th>
<th width="200">East</th>
<th width="200">Geo name Id</th>
<th width="200">West</th>
<th width="200">Population</th>
</tr>
<tr ng-repeat="x in countryData| filter:query | orderBy:'countryName'">
<td>{{ (x.countryName | uppercase)}}</td>
<td>{{ (x.currencyCode )}}</td>
<td>{{ (x.fipsCode )}}</td>
<td>{{ (x.countryCode )}}</td>
<td>{{ (x.isoNumeric )}}</td>
<td>{{ (x.north )}}</td>
<td>{{ (x.capital)}}</td>
<td>{{ (x.continentName )}}</td>
<td>{{ (x.areaInSqKm )}}</td>
<td>{{ (x.languages )}}</td>
<td>{{ (x.isoAlpha3)}}</td>
<td>{{ (x.continent)}}</td>
<td>{{ (x.south )}}</td>
<td>{{ (x.east )}}</td>
<td>{{ (x.geonameId )}}</td>
<td>{{ (x.west )}}</td>
<td>{{ (x.population )}}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('MyApp', []);
app.controller("MyCtrl", function ($scope, $http) {
$http.get("https://api.geonames.org/countryInfoJSON?username=dperic")
.success(function (response) {
$scope.countryData = response.geonames;
});
});
</script>
</body>
</html>
You can see the demo here:
November 21, 2015 @ 7:51 pm
Wow you saved my day. I was searching quick and easy way to filter data. Nice thanks a lot.