添加时未显示Angular base64图像

Question

I have a program where a user uploads a image, sees a preview then can click add to add the image to a list.

So far preview is working, but the add function is not adding the image to the next table row, Nothing shows...

Question

Can anyone see why my image is not displaying it should add the photo if max slots is greater than the amount of images added.

As you can see bellow the Image should be added to the next section in the table.

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

You've got some naming problems and consistency between your view and your model. Change your addImage to something like this :

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

And your binding like that :

<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>