Angular CRUD 往返 API

Question

我正在尝试构建一个您上传照片的系统，将照片添加到阵列，保存照片。当您保存它发布到 API 的照片时，该数组也会填充上次访问时保存到 API 的当前图像。

所以

1. 用户上传照片并查看预览（工作中）
2. 单击添加，它会将预览图像添加到数组中（不能完全正常工作）
3. 保存更新的数组并发布到 API。 （工作但不更新数组异步）

夏天

我需要一个从 API 中提取的图像列表，这些图像可以被删除和添加，然后再发布回 API。

我的工作

您上传图片，然后点击添加，然后保存并刷新，刚刚发布到 API 的图片就会打印出来。

但是，当我添加图像时，我必须保存并刷新才能看到。

我需要图像与图像列表一起显示，但在单击保存之前不发布，我还需要一种删除单个图像的方法。

查看程序的屏幕截图和打印出来的 API 图像列表

HTML

    <div ng-repeat="campaign in campaigns" class="campaign-container">

    <div class="dynamic-upload-container">
        <div class="preview"><img style="height: 100px; width: 100px" ng-src="{{preview}}" alt="preview image"></div>
        <div class="upload-new">
            <input id="fileinput" ng-model="file" type="file" ng-model-instant="" name="file" accept="image/*" onchange="angular.element(this).scope().uploadImage(this)">

        </div>
        <div class="slots-container">
            <table>
                <tr>
                    <th><p>Campaign Name</p></th>
                    <th> <strong>{{campaign.c_name}}</strong></th>
                </tr>
                <tr>
                    <td><p>Max images allowed</p></td>
                    <td><strong>{{campaign.max_slots}}</strong></td>
                </tr>
                </tr>
            </table>

            <button ng-click="addImage()">Add image</button>

            <!--<h3>these are the images pulled from API</h3>-->
            <!--<strong>{{campaign.slots}}</strong>-->

            <h3>these are the images added from preview</h3>
                <div ng-repeat="slot in campaign.slots"  class="slot">
                    <img ng-click="addImage()" style="height: 100px; width: 100px" ng-src="{{slot.base_image}}" alt="slot image">

                    <!--<strong ng-click="addImage()" style="height: 100px; width: 100px">{{campaign.slots}}}</strong>-->

                    <button ng-click="removeImage(slot)">Remove Image</button>
            </div>

             <button ng-click="SaveImage()">Save to API</button>
        </div>
    </div>

JavaScript

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

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

    $scope.safeApply = function(fn) {
        if (this.$root) {
            var phase = this.$root.$$phase;
            if (phase == '$apply' || phase == '$digest') {
                if (fn && (typeof(fn) === 'function')) {
                    fn();
                }
            } else {
                this.$apply(fn);
            }
        } else {
            fn();
        }
    };

    $scope.debug = function(){
        console.log('this is debug');
        console.log($scope.slots.length);
    };

    $scope.uploadImage = function () {
        // console.log('we are here');
        input = document.getElementById('fileinput');
        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) {
                        $scope.preview = e.target.result;
                        $scope.perfect = "you added a image";
                        $scope.$apply();

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

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

    $scope.addImage = function () {
        if ($scope.slots.length < $scope.maxSlots) {
            $scope.slots.push({
                "slot_id": $scope.slots.length + 1,
                "base_image": $scope.preview,
                "path_image": ""
            });
            $scope.safeApply

        } else {
            window.alert("you have to delete a slot to generate a new one");
            // console.log('you have to delete a slot to generate a new one')
        }
    };

    $scope.SaveImage = function () {
        $http({
            url: "http://www.site.co.uk/ccuploader/campaigns/updateSlots",
            method: "POST",
            data: { 'campaign': "ben", 'slots': $scope.slots },
            headers: {'Content-Type': 'application/json'}
        }).then(function (response) {
            // success
            console.log('success');
            console.log("then : " + JSON.stringify(response));
            // location.href = '/cms/index.html';
        }, function (response) { // optional
            // failed
            console.log('failed');
            console.log(JSON.stringify(response));
        });
    };

    $scope.removeImage = function(s) {
        $scope.campaign.slots.splice($scope.campaign.slots.indexOf(s), 1);
    };

    $scope.GetData = function () {
        $http({
            url: "http://www.site.co.uk/ccuploader/campaigns/getCampaign",
            method: "POST",
            date: {},
            headers: {'Content-Type': 'application/json'}
        }).then(function (response) {
            // success
            console.log('you have received the data ');
            console.log(response);

            $scope.campaigns = response.data;
            //$scope.slots = data.data[0].slots;

        }, function (response) {
            // failed
            console.log('failed getting campaigns goo back to log in page.');
            console.log(response);
        });
    };

    $scope.GetData();
})

Answer 1

已通过将GetData 函数路径更改为从中提取来解决

 $scope.GetData = function () {
        $http({
            url: "http://www.ccuktech.co.uk/ccuploader/campaigns/getCampaign",
            method: "POST",
            date: {},
            headers: {'Content-Type': 'application/json'}
        }).then(function (response) {
            // success
            console.log('you have received the data ');
            // console.log(response);
            $scope.campaigns = response.data;
            $scope.slots = response.data[0].slots;

        }, function (response) {
            // failed
            console.log('failed getting campaigns goo back to log in page.');
            // console.log(response);
        });
    };