角度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); 
     }); 
    };