AngularJS Filter Example using JSON

In this tutorial we will learn filter of data using AngularJS:
 
First create HTML page:

Add js File in Head:

After adding AngularJS file your code look like:

 
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.

now your code looks like:

 
now create table so our result look pretty good

       
 
 
 
 
Country Name
 
Currency Code
 
Fips Code
 
Country Code
 
Iso Numeric
 
North
 
Capital
 
Continent Name
 
Area In Sq Km
 
Languages
 
Iso Alpha3
 
Continent
 
South
 
East
 
Geo name Id
 
West
 
Population
 
 
 
  

Now we call angularJS function to show all data:

       
 
 
 
 
Country Name
 
Currency Code
 
Fips Code
 
Country Code
 
Iso Numeric
 
North
 
Capital
 
Continent Name
 
Area In Sq Km
 
Languages
 
Iso Alpha3
 
Continent
 
South
 
East
 
Geo name Id
 
West
 
Population
 
 
 
{{ (x.countryName | uppercase)}}
 
{{ (x.currencyCode )}}
 
{{ (x.fipsCode )}}
 
{{ (x.countryCode )}}
 
{{ (x.isoNumeric )}}
 
{{ (x.north )}}
 
{{ (x.capital)}}
 
{{ (x.continentName )}}
 
{{ (x.areaInSqKm )}}
 
{{ (x.languages )}}
 
{{ (x.isoAlpha3)}}
 
{{ (x.continent)}}
 
{{ (x.south )}}
 
{{ (x.east )}}
 
{{ (x.geonameId )}}
 
{{ (x.west )}}
 
{{ (x.population )}}
 
 
 
   

 
You can see the demo here:

AngularJS Filter

1 file(s) 2.98 KB

Demo