Увеличить динамически загружаемое изображение при клике в angularjs

Question

Мне нужно увеличить изображения в ячейке таблицы, когда пользователь нажимает на каждое изображение.Но эти изображения загружаются динамически, есть кнопка просмотра, которая позволяет пользователю выбрать одно или несколько изображений.Как мне поступить в этом направлении?, При ng-click изображение события должно увеличиться.Я видел примеры -

Как увеличить изображение с помощью angularJS

, но это для статических изображений.

HTML-код ->

<section style="padding: 15px;" class="landing-page" ng-controller="ews" >
    <table style="width:50%" border="1" ng-init="load()">
        <tr>
            <th align="center">First</th>
            <th align="center">Last</th>
            <th align="center">Age</th>
            <th align="center">photo</th>
        </tr>
        <tr>
            <td>AA</td>
            <td>AA</td>
            <td>25</td>
            <td>
                <input type="file" multiple file-upload />
            </td>
            <td align="right">
                <div ng-repeat="step in files">
                    <img id="view" ng-src="{{step.src}}" class="thumbnail" height="50" width="50" ng-click="zoom(step.src)" />
                </div>
            </td>
        </tr>
        <tr>
            <td>BB</td>
            <td>BB</td>
            <td>50</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>CC</td>
            <td>CC</td>
            <td>30</td>
            <td></td>
            <td></td>
        </tr>
 </table> 
 </section>

Код Angularjs ->

ews.controller('ews', ['$scope', '$http', function ($scope, $http) {

    $scope.files = [];
    $scope.$on("fileSelected", function (event, args) {
        var r = "d";
        var item = args;
        $scope.files.push(item);
        var reader = new FileReader();

        reader.addEventListener("load", function () {
            $scope.$apply(function () {
                item.src = reader.result;
            });
        }, false);

        if (item.file) {
            reader.readAsDataURL(item.file);
        }
    });


    $scope.path = '';
    $scope.path2 = '';

    $scope.imageUpload = function (event) {
        console.log(event)
        var files = event.target.files;
        var reader = new FileReader();
        reader.onload = $scope.imageIsLoaded;

        for (var i = 0; i < files.length; i++) {
            reader.readAsDataURL(files[i]);
        }
    }

    $scope.zoom = function (filename) {

        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";
        }

       // var modal = document.getElementById('myModal');

       // // Get the image and insert it inside the modal - use its "alt" text as a caption
       // var img = document.getElementById('view');
       // var modalImg = document.getElementById("img01");
       //// var captionText = document.getElementById("caption");
       // img.onclick = function (filename) {
       //     modal.style.display = "block";
       //     modalImg.src = filename;
       //     //captionText.innerHTML = this.alt;
       // }

    }

}]);

ewipApp.directive('fileUpload', function () {
    return {
        scope: true, //create a new scope
        link: function (scope, el, attrs) {
            el.bind('change', function (event) {
                var files = event.target.files;
                //var d = diffFiles;
                //iterate files since 'multiple' may be specified on the element
                for (var i = 0; i < files.length; i++) {
                    //emit event upward
                    scope.$emit("fileSelected", {
                        file: files[i]
                    });
                }
            });
        }
    };
});

Спасибо

Answer 1

Вы можете попробовать с модальными блоками в соответствии с вашими требованиями и вот ссылка для него.

https://www.w3schools.com/howto/howto_css_modal_images.asp

Ниже приведен код, который я пытался реализовать в соответствии с вашим кодом, и онработает.Пожалуйста, попробуйте.

html код:

<section style="padding: 15px;" class="landing-page" ng-controller="ews" >
    <table style="width:50%" border="1" ng-init="load()">
        <tr>
            <th align="center">First</th>
            <th align="center">Last</th>
            <th align="center">Age</th>
            <th align="center">photo</th>
        </tr>
        <tr>
            <td>AA</td>
            <td>AA</td>
            <td>25</td>
            <td>
                <input type="file" multiple file-upload />
            </td>
            <td align="right">
                <tr ng-repeat="step in files">
                        <td>
                            <img id="{{ 'img-' + step.index }}" ng-src="{{step.src}}" class="thumbnail" height="50" width="50" ng-click="zoom(step.file.name)" />

                            <div id="myModal" class="modal">
                                <!-- The Close Button -->
                                <span class="close" ng-click="closeImage()">&times;</span>

                                <!-- Modal Content (The Image) -->
                                <img class="modal-content" id="img1">

                                <!-- Modal Caption (Image Text) -->
                                <div id="caption"></div>
                            </div>
                    </tr>
            </td>
        </tr>
        <tr>
            <td>BB</td>
            <td>BB</td>
            <td>50</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>CC</td>
            <td>CC</td>
            <td>30</td>
            <td></td>
            <td></td>
        </tr>
 </table> 
 </section>

Код Angularjs:

$scope.zoom = function (filename) {

        var file = filename;
        var modal = document.getElementById('myModal');

        // Get the image and insert it inside the modal - use its "alt" text as a caption
        var img = document.getElementById('view');
        var modalImg = document.getElementById("img1");
        modal.style.display = "block";

        for (var i = 0; i < $scope.files.length; i++) {
            if ($scope.files[i].file.name === file) {
                index = i;
                break;
            }
        }

        modalImg.src = $scope.files[i].src;
    }

 $scope.closeImage = function () {
        var modal = document.getElementById('myModal');
        modal.style.display = "none";
    }