gpt4 book ai didi

javascript - 如何使用angularJS缩放图像

转载 作者:行者123 更新时间:2023-11-29 10:08:43 25 4
gpt4 key购买 nike

当我使用 angularJS 单击图像本身时,如何缩放图像。当我使用这个网站时,我不能碰巧这样做:https://github.com/owlsomely/angular-image-zoom?utm_source=angular-js.in&utm_medium=website&utm_campaign=content-curation .谁能帮忙?

我的js文件:

var camListApp = angular.module('camListApp', ['ui.bootstrap'])

camListApp.filter('unique', function() {
return function(input, key) {
var unique = {};
var uniqueList = [];
for(var i = 0; i < input.length; i++){
if(typeof unique[input[i][key]] == "undefined"){
unique[input[i][key]] = "";
uniqueList.push(input[i]);
}
}
return uniqueList;
};
});
camListApp.controller("Hello", ["$scope", "$http", function($scope, $http){

$scope.custom = true;
$scope.toggleCustom = function(url) {
$scope.custom = ! $scope.custom;
$scope.imageView = url;

};



$http.get('http://localhost:8082/camera/list').then(function(response) {
console.log(response);
$scope.records= response.data;
});
}]);

我的 html 文件:

 <div ng-controller="Hello" class="col-xs-12">


<b>Search:</b><br>

<input type = "text" ng-model="searchBox" uib-typeahead="state.cameraid as state.cameraid for state in records | filter:searchBox | limitTo:8 | unique:'cameraid'">


<br>
<br>
<br>
<br>
<table border = 1 class="table table-striped table-hover" style="width:45%">
<thead>
<tr>

<th><center>CamID</th></center>
<th><center>Timestamp</th></center>
<th><center>View Image</center></th>
</tr>
</thead>

<tbody>
<tr ng-repeat="record in records | filter:searchBox | orderBy:'+timestamp'">

<td>{{record.cameraid}}</td>
<td>{{record.timestamp}}</td>
<td><center> <button class="btn btn-primary" ng-click="toggleCustom(record.filename)" onclick="myFunction()">View</center></button></td>
</tr>


</tbody>
</table>

<span id="myDIV" ng-hide="custom">
<img ng-src="http://localhost:9100/Images/{{imageView}}.png" image-zoom width="500" height="400">
</span>

<!--<span ng-hide="custom">To:
<input type="text" id="to" />
</span>-->
<span ng-show="custom"></span>
</div>
<script>
function myFunction() {
document.getElementById("myDIV").style.position = "absolute";
}
</script>


</body>
</html>

最佳答案

创建了 ng-click on image

HTML

    <span id="myDIV" ng-hide="custom">
<img id="view" ng-src="http://www.w3schools.com/css/{{imageView}}" width="300" height="300" ng-click="zoom()">
</span>

JS

 $scope.zoom = function() {
var imageId = document.getElementById('view');
if(imageId.style.width == "400px"){
imageId.style.width = "300px";
imageId.style.height = "300px";
}else{
imageId.style.width = "400px";
imageId.style.height = "400px";
}

Codepen- http://codepen.io/nagasai/pen/jrMzER

关于javascript - 如何使用angularJS缩放图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37914561/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com