priyanka.sarkar priyanka.sarkar - 1 month ago 23
AngularJS Question

How to display image in large size onmouseover inside a dynamic div

I am trying to make a simple photo gallery in angularJS. Below is the code

index.html



<!DOCTYPE html>
<html >
<head>
<title></title>

<script src="http://code.angularjs.org/1.2.0rc1/angular.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="test.js"></script>

</head>
<body ng-app="testModule" ng-controller="testCtrl">
<div style="width: 60%; margin: 0 auto;">
<div id="dp"></div>
</div>
</body>
</html>


test.js (Controller)



function testMe(imgSrc) {
alert(imgSrc);
}

angular
.module('testModule', [])
.controller('testCtrl', function($scope) {
var photoSource = [
["images/ph1.jpg", "images/ph2.jpg"],
["images/ph5.jpg", "images/ph6.jpg"]
];
var body = "<table>";
var row = 2;
var col = 2;
for (var i = 0; i < row; i++) {
body += "<tr>";
for (var j = 0; j < col; j++) {
body += "<td> <img id='" + i + j + "' src='" + photoSource[i][j] + "' onmouseover=testMe('" + photoSource[i][j] + "');></td>";
}
body += "</tr>";
}
body += "</table>";
console.log(body);
$("#dp").html(body);
});


The problem is that, when the mouse is over an image I want to display that image in the center on a div tag. But this portion I could not achieve.

Please help me

Sam Sam
Answer

you don't need to manipulate the html inside your controller instead use bindings of angular so your javascript becomes

function testMe(imgSrc) {

        alert(imgSrc);
     } 

angular
.module('testModule', [])
.controller('testCtrl', function ($scope) {

    $scope.photoSource = [
                    [ "images/ph1.jpg","images/ph2.jpg"],
                    [ "images/ph5.jpg","images/ph6.jpg"]                    
               ]; 

    $scope.showFullImage = function(photoSrc) {
      // this function will call when you mouseover so add logic here and photosrc will be current mouseover image src
       }
});

now in your html use this photoSource scope variable to generate table

<body ng-app="testModule" ng-controller="testCtrl">
    <div style="width: 60%; margin: 0 auto;">         
        <div id="dp">
<table>
 <tr ng-repeat="photos in photoSource">
  <td ng-repeat="photo in photos">
    <img ng-src="{{photo}}" ng-mouseover="showFullImage(photo)" />
  </td>
 </tr>
</table>
</div>
    </div> 
</body>