Angularjs dynamically change image src on click
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
<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...

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, Laravel, Angular, Vue, Node, Javascript, JQuery, Codeigniter and Bootstrap from the early stage. I believe in Hardworking and Consistency.
We are Recommending you
- Angularjs Simple Datepicker directive example code with Demo
- AngularJS - sorting(using orderby filter) table data example with demo
- How to change date format using date filter in AngularJS?
- AngularJS - How to Limit String Length using Filter?
- AngularJS - How to Capitalize the first letter of word Using filter?
- AngularJS - how to remove html tags using filter?
- PHP AngularJS CRUD with Search and Pagination Example From Scratch
- Codeigniter Angularjs http post not working