Angularjs dynamically change image src on click

By Hardik Savani | March 28, 2019 | | 20211 Viewer | Category : AngularJS


In this example, i want to show you how to change image src dynamically on image or button click event in angularjs. you will learn dynamically change the src attribute of image element when clicked using the ng-src directive in angular js.

Here, i will give you one example to change dynamic image ng-src. we will create one json array and change dynamically image when user will click on image.

So, let's see bellow code for change image on click in angular js.

index.html

Read Also: AngularJS tooltip using UI Bootstrap tpls HTML example with demo
<html>
<head>
    <title>Angularjs dynamically change image src on click - ItSolutionStuff.com</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
</head>
    
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <img ng-src="{{Image.Photo}}" ng-click="ImageClick()" style="height: 200px; width: 300px;
            cursor: pointer" />
         <p>Click on Image</p>
    </div>
</body>
    
<script type="text/javascript">
    var app = angular.module('MyApp', []);
       
    app.controller('MyController', function ($scope, $interval) {
        $scope.Images = [
                { Id: 1, Photo: "http://itsolutionstuff.com/upload/guzzle-http-request-laravel-5-8-min.jpg" },
                { Id: 2, Photo: "http://itsolutionstuff.com/upload/admin-panel-laravel-5-8-min.png" },
                { Id: 3, Photo: "http://itsolutionstuff.com/upload/ajax-form-validation-laravel-5-8.jpg" },
                { Id: 4, Photo: "http://itsolutionstuff.com/upload/rest-api-laravel-5-8.jpg" }
               ];
   
        $scope.Image = $scope.Images[0];
        var index = 1;
    
        $scope.ImageClick = function () {
            $scope.Image = $scope.Images[index];
    
            index++;
   
            if (index > $scope.Images.length - 1) {
                index = 0
            }
        };
    });
</script>
</html>

I hope it can help you...



Tags : AngularJS AngularJS Directive Example

Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

Featured Post

We are Recommending you: