priyanka.sarkar priyanka.sarkar - 10 months ago 73
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 Source

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>