Javascript 在具有角度重复的阵列中显示阵列对象
我有一个简单的帖子，可以获取我的json对象 在我的json中，我有2个或更多的活动，活动是一个数组 在活动阵列中我有插槽，插槽是一个阵列，其中有一个或多个基本_映像 我在屏幕上显示每个活动Javascript 在具有角度重复的阵列中显示阵列对象,javascript,angularjs,arrays,json,angularjs-ng-repeat,Javascript,Angularjs,Arrays,Json,Angularjs Ng Repeat,我有一个简单的帖子，可以获取我的json对象 在我的json中，我有2个或更多的活动，活动是一个数组 在活动阵列中我有插槽，插槽是一个阵列，其中有一个或多个基本_映像 我在屏幕上显示每个活动 最大插槽数 c_名称 slots.base\u图像 因此，我可以显示每个活动名称、允许的最大插槽以及每个活动中关联的图像 目标 我正在尝试为每个活动创建一个上载图像和预览图像，这样您只能看到您上载到的活动的图像预览 问题 目前，我上传了一张图片，它显示在所有活动的预览中，而不是单个活动 见下图： HT
最大插槽数c_名称slots.base\u图像
<body ng-app="myApp">
<div ng-controller="Dashboard">
<!--FIRST ng-repeat-->
<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 id="fileinput" ng-model="file" type="file" ng-model-instant="" name="file"
accept="image/*"
onchange="angular.element(this).scope().uploadImage(this)">
</div>
<!--END-->
</td>
<td> <!--PREVIEW IMAGE-->
<div class="preview">
<img style="height: 100px; width: 100px" ng-src="{{preview}}" alt="preview image">
</div>
<!--END--></td>
<td>
<button ng-click="addImage()">Add image</button>
</td>
<td>
<div ng-repeat="slot in campaign.slots" class="slot">
<img ng-click="addImage()" style="height: 100px; width: 100px" ng-src="{{base_image}}"
alt="slot image">
<button ng-click="removeImage(slot)">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>
<!--END FIRST ng-repeat-->
</div>
</body>
<input id="fileinput-{{ $index }}" ng-model="file" type="file" ng-model-instant="" name="file" accept="image/*" onchange="angular.element(this).scope().uploadImage(this)">
{{campaign.c_name}{{{$index}}
此活动允许您使用{{Campaign.max_slots}}图像
选择文件
预览图像
添加到列表中
图像
拯救运动
添加图像
删除图像
保存到API
.controller('Dashboard', function ($scope, $http, $timeout) {
$scope.campaigns = [];
$scope.preview = '';
// $scope.slots = [];
$scope.maxSlots = [5];// this dynamic
$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";
}
};
img.src = fr.result;
};
fr.readAsDataURL(file);
} else {
$scope.notPerfect = "to big";
}
};
$scope.addImage = function (index) {
if ($scope.campaigns[index].slots.length < $scope.campaigns.maxSlots) {
$scope.campaigns[index].slots.push({
"slot_id": $scope.campaigns[index].slots.length + 1,
"base_image": $scope.preview,
"path_image": ""
});
} else {
window.alert("you have to delete a slot to generate a new one");
}
};
$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;
console.log("logging campaings", $scope.campaigns);
//$scope.slots = response.data[0].slots;
//$scope.maxSlots = response.data[0].maxSlots;
}, function (response) {
// failed
console.log('failed getting campaigns goo back to log in page.');
// console.log(response);
});
};
$scope.GetData();
})
.controller（'Dashboard'，函数（$scope、$http、$timeout）{
$scope.campetings=[]；
$scope.preview=''；
//$scope.slots=[]；
$scope.maxSlots=[5]；//此动态
$scope.uploadImage=函数（）{
//log（“我们在这里”）；
输入=document.getElementById（'fileinput'）；
file=input.files[0]；
size=file.size；
如果（尺寸<650000）{
var fr=新文件读取器；
fr.onload=功能（e）{
var img=新图像；
img.onload=函数（）{
变量宽度=img.width；
var高度=img高度；
如果（宽度=1920，高度=1080）{
$scope.preview=e.target.result；
$scope.perfect=“您添加了图像”；
$scope.$apply（）；
}否则{
$scope.notPerfect=“定义不正确”；
}
};
img.src=fr.result；
};
fr.readAsDataURL（文件）；
}否则{
$scope.notPerfect=“to big”；
}
};
$scope.addImage=函数（索引）{
if（$scope.campaiments[index].slots.length<$scope.campaiments.maxSlots）{
$scope.campetings[index].slots.push({
“slot\u id”：$scope.campetings[index].slots.length+1，
“基本图像”：$scope.preview，
“路径\图像”：”
});
}否则{
警告（“您必须删除一个插槽才能生成一个新插槽”）；
}
};
$scope.GetData=函数（）{
$http({
url:“http://www.site.co.uk/ccuploader/campaigns/getCampaign",
方法：“张贴”，
日期：{}，
标题：{'Content-Type'：'application/json'}
}).然后（功能（响应）{
//成功
log（“您已收到数据”）；
//控制台日志（响应）；
$scope.campaings=response.data；
log（“记录营地”，$scope.campaings）；
//$scope.slots=response.data[0]。插槽；
//$scope.maxSlots=response.data[0].maxSlots；
}，功能（回应）{
//失败
log（'将活动goo返回到登录页失败'）；
//控制台日志（响应）；
});
};
$scope.GetData（）；
})
预览活动都需要一个变量。您可能希望将活动的索引传递到您的uploadImage
函数中
我不确定您执行文件输入的方式是否正确（我自己没有做过太多），但您需要这样做：
模板：
<input type="file" onchange="angular.element(this).scope().uploadImage(this, $index)">
<img ng-src="{{campaign.preview}}" alt="preview image">
正如我在上面的评论中提到的，您还调用了input=document.getElementById（'fileinput'）
获取文件输入，但是ng repeat
将创建许多具有该ID的输入。也许您应该使用传递到uploadImage（此$index）
的输入或索引。如果出于某种原因，您仍然需要使用getElementById
而不是使用传入的元素，则可以使用索引生成唯一ID：
<input id="fileinput-{{ $index }}"
谢谢，这很有意义。我将执行此测试并希望接受您的答案。只是尝试修复一个错误，我得到了未捕获的引用错误：$index未定义
一旦它工作，我将接受答案您是命名函数参数index
还是$index
？在模板中
<input id="fileinput-{{ $index }}" ng-model="file" type="file" ng-model-instant="" name="file" accept="image/*" onchange="angular.element(this).scope().uploadImage(this)">
$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";
}
};