我可以添加照片并将其删除,但是当我这样做时,我必须刷新。我希望更新范围并自动完成,但在添加文件后,get永远不会运行。我必须使用.apply吗?
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>
答案 0 :(得分:3)
只需进入您将调用then()
$scope.photos = [];
//get all photographs
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]);
}
},
function errorCallback(error){
$log.warn(error);
});
};
getPhotos(); // That way it is still called
$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);
},
function(resp){
console.log('Error status: ' + resp.status);
getPhotos(); // <==== Here
},
function(evt){
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progress: ' + progressPercentage + '% ' + evt.config.data.files.name);
});
}
}
};
答案 1 :(得分:0)
$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);
$scope.getPhotos().then(function(response){
$scope.photos = response.data;
},
function errorCallback(error){
$log.warn(error);
});
},
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.getPhotos = function(){
return $http.get('api/admin/photos/get');
}
$scope.getPhotos().then(function(response){
$scope.photos = response.data;
},
function errorCallback(error){
$log.warn(error);
});
$scope.deletePics = function(id){
$http.delete('/api/admin/photos/' + id, {params : {id: id}})
.then(function successCallback(response){
},
function errorcallback(error){
console.log(error);
});
};