【发布时间】：2017-10-04 05:40:02
【问题描述】：
我正在尝试更改我在每个专辑中拥有的重复图像列表的 ng-src。我尝试通过增加缩略图 url 的大小来做一些笨拙的事情，但我想要一种更具体的方法将我的 imgs 的 ng-src 交换为图像的更大 url。这是我的代码：
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="album.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="album.css">
</head>
<body>
<div ng-app="myApp" ng-controller="AlbumCtrl">
<div class="bar">
<h3>Search by ID or Title</h3><input type="text" class="search" ng-model="q" placeholder="Enter your search terms" />
</div>
<div ng-repeat="album in albumData|filter:q" id="thumbWrapper">
<h1>{{album.id}}</h1>
<h4>Title: </h4><button class="show" ng-click="showme = !showme">{{album.title}}</button>
<div id="thumbList"ng-show="showme"class="albumContent">
<ul ng-controller="PhotoCtrl" id="thumbList">
<li ng-repeat="photo in photoData" ng-if="album.userId == photo.albumId">
<img id="view{{$index}}" ng-click="zoom($index)" ng-src={{photo.url}}>
<p ng-click="delete($index)">x</p>
</li>
</ul>
</div>
</div>
</div>
js：
var app = angular.module('myApp', []);
app.controller('AlbumCtrl', function ($scope, $http) {
$http.get("https://jsonplaceholder.typicode.com/albums").then(function(response) {
$scope.albumData = response.data;
console.log($scope.albumData);
});
});
app.controller('PhotoCtrl', function($scope, $http) {
$http.get("https://jsonplaceholder.typicode.com/photos").then(function(response) {
$scope.photoData = response.data;
});
$scope.delete = function(index) {
$scope.photoData.splice(index, 1);
var del = "/" + (index + 1);
$http.delete("https://jsonplaceholder.typicode.com/photos" + del).then(function(response) {
console.log($scope.albumData);
});
};
$scope.zoom = function(index) {
var elem = "view" + index;
var imageId = document.getElementById(elem);
if(imageId.style.width == "1000px"){
imageId.style.width = "600px";
imageId.style.height = "600px";
}else{
imageId.style.width = "1000px";
imageId.style.height = "1000px";
}
};
});
非常感谢任何帮助
【问题讨论】：
-
要处理的代码越多，人们就越不可能找到您的问题。见How to create a Minimal, Complete, and Verifiable example。
标签： javascript jquery html angularjs image