问题描述
限时送ChatGPT账号..当我使用 angularJS 单击图像本身时,如何缩放图像.当我使用这个网站时,我不能这样做:https://github/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() {返回函数(输入,键){var 唯一 = {};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]);}}返回唯一列表;};});camListApp.controller("Hello", ["$scope", "$http", function($scope, $http){$scope.custom = true;$scope.toggleCustom = 函数(网址){$scope.custom = !$scope.custom;$scope.imageView = url;};$http.get('http://localhost:8082/camera/list').then(function(response) {控制台日志(响应);$scope.records= response.data;});}]);
我的 html 文件:
<b>搜索:</b><br><input type = "text" ng-model="searchBox" uib-typeahead="state.cameraid as state.cameraid 记录中的状态 | filter:searchBox | limitTo:8 | unique:'cameraid'"><br><br><br><br><table border = 1 class="table table-striped table-hover" style="width:45%"><头><tr><th><center>CamID</th></center><th><center>时间戳</th></center><th><center>查看图像</center></th></tr></thead><tr ng-repeat="记录记录 | filter:searchBox | orderBy:'+timestamp'"><td>{{record.cameraid}}</td><td>{{record.timestamp}}</td><td><中心><button class="btn btn-primary" ng-click="toggleCustom(record.filename)" onclick="myFunction()">查看</center></button></td></tr></tbody><span id="myDIV" ng-hide="自定义"><img ng-src="http://localhost:9100/Images/{{imageView}}.png" image-zoom width="500" height="400"></span><!--<span ng-hide="custom">到:<input type="text" id="to"/></span>--><span ng-show="自定义"></span><脚本>函数 myFunction() {document.getElementById("myDIV").style.position = "absolute";}
发布评论