当我使用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-点击图片
的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