Articles → ANGULAR.JS → Image Search Using Angular.JS

Image Search Using Angular.JS

In this article, we will see how to make an image search feature on a web page using angular.js.

Get The List Of Images

First of all, copy the images that you want to search in the project folder. In this article, I am copying following images

Picture showing the folder with the list of images

Click to Enlarge

Create A Controller

In the controller, I have added the name of images in a variable. See the following code

<script type="text/javascript">
var app = angular.module('app', []);
app.controller('myController', function($scope) {
	$scope.Images = ["Chrysanthemum", "Desert", "Hydrangeas", "Jellyfish", "Koala", "Lighthouse", "Penguins", "Tulips"];
});        
</script>

Create Search Controls

Last step is to create a textbox that can filter the image based on text. So the code is

<div ng-app="app" ng-controller="myController"><input type="text" ng-model="ImageFilter" /><img ng-repeat="img in Images | filter: ImageFilter" width="50" height="50" src="Images\{{img}}.jpg" alt="{{img}}" /><br /></div>

Output

Now run the application, you see the following output

Click to Enlarge

Posted By -	Karan Gupta

Posted On -	Sunday, January 24, 2016

Query/Feedback

Your Email Id

Subject

Query/Feedback	Characters remaining 250