Я могу добавлять фотографии и удалять их, однако, когда я это делаю, мне нужно обновить. Я бы хотел, чтобы область была обновлена, и это будет сделано автоматически, но после добавления файлов получение никогда не запускается. Должен ли я использовать .apply для этого?Как я могу получить 'get' для вызова автоматически?
app.js
$scope.submit = function() {
if ($scope.file) {
$scope.upload($scope.file);
}
if($scope.files){
$scope.uploadFiles($scope.files);
console.log('this happens after upload files');
}
};
$scope.uploadFiles = function (files) {
if (files && files.length) {
for (var i = 0; i < files.length; i++) {
Upload.upload({
url: 'api/admin/photos',
data: {files: files[i]}
}).then(function(resp){
$scope.photos.push(resp.data);
$log.info(resp.data);
$log.info($scope.photos);
getPhotos();
},
function(resp){
console.log('Error status: ' + resp.status);
},
function(evt){
//var progressPercentage = parseInt(100.0 * evt.loaded/evt.total);
//console.log('progress: ' + progressPercentage + '% ' + evt.config.data.files.name);
});
}
}
};
//get all photographs
$scope.photos = [];
var getPhotos = function(){
$http.get('api/admin/photos/get')
.then(function successCallback(response){
$scope.photos.length = 0;
for (var i=0; i < response.data.length; ++i){
$scope.photos.push(response.data[i]);
}
$log.warn($scope.photos);
console.log('this happened automatically');
},
function errorCallback(error){
$log.warn(error);
});
};
getPhotos();
$scope.deletePics = function(id){
$http.delete('/api/admin/photos/' + id, {params : {id: id}})
.then(function successCallback(response){
//console.log(response);
$scope.photos = $scope.photos.filter(function(photo){
return photo.id !== id;
});
},
function errorcallback(error){
console.log(error);
});
};
Когда я представляю для загрузки, в моем console.log это то, что я получаю:
[Object, Object]0: Object1: Objectlength: 2__proto__: Array[0]
app.js: 375 это произошло автоматически
Однако, когда я обновляю код, появляются изображения.
HTML
<form ng-controller="adminController" name="form" enctype="multipart/form-data">
Single Image with validations
Выберите отправить
<span class="progress" ng-show="progress >= 0">
<div style="width:{{progress}}%" ng-bind="progress + '%'"></div>
</span>
</form>
<ul >
<li ng-repeat="photo in photos"><img ng-src="img/{{ photo.url}}" />
{{ photo }}
{{photo.name}}
{{photos}}
<button class="button btn btn-warning" ng- click="deletePics(photo._id)">Delete</button>
</li>
</ul>
Если 'Upload' не использует' $ http' обслуживание, то да. –
Итак, поставьте его в методе и вызовите метод после вызова Ajax. – epascarello
@epascarello Это добавит дополнительный запрос, чтобы восстановить все данные, которые уже находятся на клиенте. –