Angularjs dynamically change image src on click
In this post we will give you information about Angularjs dynamically change image src on click. Hear we will give you detail about Angularjs dynamically change image src on clickAnd how to use it also give you demo for it if it is necessary.
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: "https://onlinecode.org/upload/guzzle-http-request-laravel-5-8-min.jpg" },
{ Id: 2, Photo: "https://onlinecode.org/upload/admin-panel-laravel-5-8-min.png" },
{ Id: 3, Photo: "https://onlinecode.org/upload/ajax-form-validation-laravel-5-8.jpg" },
{ Id: 4, Photo: "https://onlinecode.org/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…
Hope this code and post will helped you for implement Angularjs dynamically change image src on click. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs