pri*_*kar 6 html javascript jquery angularjs
我想在angularJS中制作一个简单的照片库.下面是代码
<!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>
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);
});
问题是,当鼠标悬停在图像上时,我想在div标签的中心显示该图像.但这部分我无法实现.
小智 7
你不需要操纵控制器中的html而是使用angular的绑定,这样你的javascript就变成了
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
}
});
现在在你的html中使用这个photoSource范围变量来生成表格
<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>
| 归档时间： |
|
| 查看次数： |
1117 次 |
| 最近记录： |