添加時未顯示Angular base64圖像

Question

我有一個程序，用戶可以在其中上傳圖像，查看預覽，然后可以單擊添加以將圖像添加到列表中。

到目前為止，預覽工作正常，但是添加功能未將圖像添加到下一個表格行，沒有任何顯示...

題

如果最大插槽大於添加的圖像數量，誰能看到我的圖像為什么不顯示的原因應該添加照片。

如您所見，應該將圖像添加到表的下一部分。

的HTML

 <div ng-repeat="campaign in campaigns" class="campaign-container">
    <div class="container">
        <h1>{{campaign.c_name}} {{$index}}</h1><strong>This Campaign you are allowed {{campaign.max_slots}} Images</strong>
        <table class="table">
            <thead>
            <tr>
                <th>Select File</th>
                <th>Preview Image</th>
                <th>Add to list</th>
                <th>Images</th>
                <!-- <th>Remove Image</th>-->
                <th>Save Campaign</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>
                    <!-- UPLOAD IMAGE-->
                    <div class="upload-new">
                        <input type="file"  fileread="vm.uploadme" id="fileinput-{{ $index }}" onchange="angular.element(this).scope().uploadImage(this)"/>
                    </div>
                    <!-- END-->
                </td>
                <td>
                    <!-- PREVIEW IMAGE-->
                    <div class="preview">
                        <img style="height: 100px; width: 100px" ng-src="{{campaign.preview}}" alt="preview image">
                    </div>
                    <!-- END-->
                </td>
                <td>
                    <button ng-click="addImage($index)">Add image</button>
                </td>
                <td>
                    <div ng-repeat="slot in campaign.slots" class="slot">
                        <img ng-click="addImage($index)" style="height: 100px; width: 100px" ng-src="{{slots.base_image}}" alt="show image here">
                        <img ng-src="{{slots.base_image}}" />
                        <button ng-click="removeImage(slots)">Remove Image</button>
                    </div>
                </td>
                <!-- <td>Remove button to be here</td>-->
                <td>
                    <button ng-click="SaveImage()">Save to API</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

的JavaScript

     .controller('Dashboard', function ($scope, $http, $timeout) {

        $scope.campaigns = [];
        $scope.preview = '';
        // $scope.slots = [];
        // $scope.maxSlots = maxSlots;

        $scope.uploadImage = function (element, index) {
            console.log(element);
            console.log(element.id);
            str = element.id;
            str = str.substr(str.indexOf('-') + 1);
            console.log(str);
            index = str;

            // console.log('we are here');
            input = element;
            file = input.files[0];
            size = file.size;
            if (size < 650000) {
                var fr = new FileReader;
                fr.onload = function (e) {
                    var img = new Image;

                    img.onload = function () {
                        var width = img.width;
                        var height = img.height;
                        if (width == 1920 && height == 1080) {
console.log('we are here');
                            $scope.campaigns[index].preview = e.target.result;
                            // $scope.preview = e.target.result;
                            $scope.perfect = "you added a image";
                            $scope.$apply();

                        } else {
                            $scope.notPerfect = "incorrect definitions";
                        }
                    };
                    img.src = fr.result;
                };

                fr.readAsDataURL(file);
            } else {
                $scope.notPerfect = "to big";
            }
        };

        $scope.addImage = function (campaign) {
            if(!campaign) return;
            if ($scope.length < campaign.max_slots) {
                $scope.slots.push({
                    "slot_id": $scope.length + 1,
                    "base_image": $scope.preview,
                    "path_image": ""
                });
            } else {
                window.alert("you have to delete a slot to generate a new one");
            }
        };

Answer 1

您在視圖和模型之間存在一些命名問題和一致性。 將您的addImage更改為以下內容：

$scope.addImage = function (campaign) {
    if(!campaign) return;
    if (campaign.slots.length < campaign.max_slots) {
        campaign.slots.push({
            "slot_id": $scope.length + 1,
            "base_image": campaign.preview,
            "path_image": ""
        });
    } else {
        window.alert("you have to delete a slot to generate a new one");
    }
};

和你這樣的約束：

<div ng-repeat="slot in campaign.slots" class="slot">
    <img style="height: 100px; width: 100px" ng-src="{{slot.base_image}}" alt="show image here">
    <img ng-src="{{slot.base_image}}" />
    <button ng-click="removeImage(slot)">Remove Image</button>
</div>