Dynamically change image src on click in Angular JS

If you want to change dynamically image src in your angular app then i will help to make dynamically change image on click in angular js.

As we know we will always use api to get json object with all details. so you can change dynamically image using ng-src directive in angularjs. you see bellow full and simple example of change image src.

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.

Example:


<html>
<head>
    <title>Dynamically change image src on click in Angular JS - HDTuto.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>

Dynamically change image src on click in Angular JS

Do you like below Tutorials ?

New Articles

Blog Categories

Random Articles