添加时未显示Angular base64图像

时间:2017-09-28 15:15:22

标签: javascript angularjs image

我有一个程序,用户上传图像,看到预览,然后点击添加将图像添加到列表中。

到目前为止预览工作正常,但添加功能没有将图像添加到下一个表格行,没有显示......

问题

任何人都可以看到为什么我的图片没有显示它应该添加照片,如果最大插槽大于添加的图像数量。

如您所见,图像应添加到表格的下一部分。

maxslots

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

1 个答案:

答案 0 :(得分:0)

您的视图和模型之间存在一些命名问题和一致性。将您的$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>

你那样的装订:

{{1}}