Articles → ANGULAR.JS → Image search using angular.js

Image search using angular.js






Get the list of images





Click to Enlarge


Create a controller




<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




<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





Click to Enlarge


Posted By  -  Karan Gupta
 
Posted On  -  Sunday, January 24, 2016

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250