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:

AngularJS Filter

1 file(s) 2.98 KB

Demo

AngularJS Filter Example using JSON

AngularJS Filter

Comments

One response to “AngularJS Filter Example using JSON”