我有一个程序,用户上传图像,看到预览,然后点击添加将图像添加到列表中。
到目前为止预览工作正常,但添加功能没有将图像添加到下一个表格行,没有显示......
问题
任何人都可以看到为什么我的图片没有显示它应该添加照片,如果最大插槽大于添加的图像数量。
如您所见,图像应添加到表格的下一部分。
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");
}
};
答案 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}}