Javascript angualrjs如何使用.push克隆相同位置的图像？
我正在尝试在键盘上创建图像的副本。问题是当我将副本推到我的对象数组以更改css左上方位置时，该操作不起作用。我认为ng repeat仍在加载html。有没有办法让promise或其他东西复制图像，并在添加新对象后更改cssJavascript angualrjs如何使用.push克隆相同位置的图像？,javascript,angularjs,angularjs-ng-repeat,draggable,angular-promise,Javascript,Angularjs,Angularjs Ng Repeat,Draggable,Angular Promise,我正在尝试在键盘上创建图像的副本。问题是当我将副本推到我的对象数组以更改css左上方位置时，该操作不起作用。我认为ng repeat仍在加载html。有没有办法让promise或其他东西复制图像，并在添加新对象后更改css $scope.changed = function (keyevent, item, id) { keyevent.preventDefault(); switch (keyevent.keyCode) { case 68:
$scope.changed = function (keyevent, item, id) {
keyevent.preventDefault();
switch (keyevent.keyCode) {
case 68:
if (keyevent.ctrlKey) {
left = $('#' + id).css("left").slice(0, -2);
top = $('#' + id).css("top").slice(0, -2);
item.duplicate = true;
item = angular.copy(item);
itemId = $scope.items.push(item);
imagePosition(itemId - 1, left, top);
}
break;
}
}
function imagePosition(id, left, top) {
$("#" + id).css({left: left, top: top});
}
$（“#”+id）.css（{left:left，top:top}）中
这不起作用，因为您可以使用jquery for angular
document.getElementById("yourDivId"+id).style.top= top;
document.getElementById("yourDivId"+id).style.left= left;
在角度$（“#”+id）.css（{left:left，top:top}）中
这不起作用，因为您可以使用jquery for angular
document.getElementById("yourDivId"+id).style.top= top;
document.getElementById("yourDivId"+id).style.left= left;
为了解决我的问题，我使用了ng style=“getStyle（$index，item）”并调用了一个函数。
每当我将新对象推送到数组时，都会重复调用getStyle。我的对象对我的css样式有一些属性
<div style="margin-left: 20px;" ng-repeat="item in template.list2">
<img ng-click="setBorder($index,true)" ng-focus="setBorder($index,true)" ng-blur="setBorder($index,false)"
ng-style="<%getStyle($index,item)%>" id="<%$index%>" ng-keydown="changed($event,item,$index,this)" tabindex="<%$index%>" ng-show="item.link"
src="<% item.link %>"
data-drag="<%item.drag%>"
data-jqyoui-options="{revert: 'invalid',snap:true,snapTolerance:15,zIndex:999,snapMode:'inner'}"
ng-model="template.list2"
jqyoui-draggable="{index: <%$index%>,placeholder:true,animate:true}"/>
</div>
$scope.changed = function (keyevent, item, id) {
keyevent.preventDefault();
switch (keyevent.keyCode) {
case 68:
if (keyevent.ctrlKey) {
left = parseInt($('#' + id).css("left").slice(0, -2));
top = parseInt($('#' + id).css("top").slice(0, -2));
item.left = left;
item.top = top;
item.duplicate = true;
item = angular.copy(item);
$scope.template.list2.push(item);
Notification.success("Imagem duplicada com sucesso!");
}
break;
}
$scope.getStyle = function (index, item) {
if(item.duplicate)
{
var top = item.top + 20;
var left = item.left +20;
var css = {
"position":'absolute',
"left":+ left + 'px',
"top": + top + 'px',
"height": item.height + 'px',
"width": item.width + 'px',
'z-index': 999
};
}else{
var css = {
"float": 'left',
"left": (item.width * index + 5) + "px",
"position":'absolute',
"height": item.height,
"width": item.width,
"display": 'inline-block'
};
}
return css;
}
}
"
数据拖动=“”
data jqyoui options=“{revert:'invalid'，snap:true，snapTolerance:15，zIndex:999，snapMode:'inner'}”
ng model=“template.list2”
jqyoui draggable=“{index:，占位符：true，动画：true}”/>
$scope.changed=函数（keyevent、item、id）{
keyevent.preventDefault（）；
开关（keyevent.keyCode）{
案例68：
if（keyevent.ctrlKey）{
left=parseInt（$（'#'+id）.css（“left”）.slice（0，-2））；
top=parseInt（$（'#'+id）.css（“top”）.slice（0，-2））；
item.left=左；
item.top=top；
item.duplicate=true；
项目=角度。副本（项目）；
$scope.template.list2.push（项目）；
Notification.success（“Imagem duplicada com successo！”）；
}
打破
}
$scope.getStyle=函数（索引，项）{
如果（项目重复）
{
var top=项目top+20；
var left=项目左侧+20；
变量css={
“位置”：“绝对”，
“左”：+左+像素，
“顶部”：+top+‘px’，
“高度”：项目高度+px，
“宽度”：item.width+'px'，
“z索引”：999
};
}否则{
变量css={
“浮动”：“左”，
“左”：（item.width*索引+5）+“px”，
“位置”：“绝对”，
“高度”：项目高度，
“宽度”：item.width，
“显示”：“内联块”
};
}
返回css；
}
}
为了解决我的问题，我使用了ng style=“getStyle（$index，item）”并调用了一个函数。
每当我将新对象推送到数组中时，都会重复调用getStyle。我的对象与我的css样式有一些属性
<div style="margin-left: 20px;" ng-repeat="item in template.list2">
<img ng-click="setBorder($index,true)" ng-focus="setBorder($index,true)" ng-blur="setBorder($index,false)"
ng-style="<%getStyle($index,item)%>" id="<%$index%>" ng-keydown="changed($event,item,$index,this)" tabindex="<%$index%>" ng-show="item.link"
src="<% item.link %>"
data-drag="<%item.drag%>"
data-jqyoui-options="{revert: 'invalid',snap:true,snapTolerance:15,zIndex:999,snapMode:'inner'}"
ng-model="template.list2"
jqyoui-draggable="{index: <%$index%>,placeholder:true,animate:true}"/>
</div>
$scope.changed = function (keyevent, item, id) {
keyevent.preventDefault();
switch (keyevent.keyCode) {
case 68:
if (keyevent.ctrlKey) {
left = parseInt($('#' + id).css("left").slice(0, -2));
top = parseInt($('#' + id).css("top").slice(0, -2));
item.left = left;
item.top = top;
item.duplicate = true;
item = angular.copy(item);
$scope.template.list2.push(item);
Notification.success("Imagem duplicada com sucesso!");
}
break;
}
$scope.getStyle = function (index, item) {
if(item.duplicate)
{
var top = item.top + 20;
var left = item.left +20;
var css = {
"position":'absolute',
"left":+ left + 'px',
"top": + top + 'px',
"height": item.height + 'px',
"width": item.width + 'px',
'z-index': 999
};
}else{
var css = {
"float": 'left',
"left": (item.width * index + 5) + "px",
"position":'absolute',
"height": item.height,
"width": item.width,
"display": 'inline-block'
};
}
return css;
}
}
"
数据拖动=“”
data jqyoui options=“{revert:'invalid'，snap:true，snapTolerance:15，zIndex:999，snapMode:'inner'}”
ng model=“template.list2”
jqyoui draggable=“{index:，占位符：true，动画：true}”/>
$scope.changed=函数（keyevent、item、id）{
keyevent.preventDefault（）；
开关（keyevent.keyCode）{
案例68：
if（keyevent.ctrlKey）{
left=parseInt（$（'#'+id）.css（“left”）.slice（0，-2））；
top=parseInt（$（'#'+id）.css（“top”）.slice（0，-2））；
item.left=左；
item.top=top；
item.duplicate=true；
项目=角度。副本（项目）；
$scope.template.list2.push（项目）；
Notification.success（“Imagem duplicada com successo！”）；
}
打破
}
$scope.getStyle=函数（索引，项）{
如果（项目重复）
{
var top=项目top+20；
var left=项目左侧+20；
变量css={
“位置”：“绝对”，
“左”：+左+像素，
“顶部”：+top+‘px’，
“高度”：项目高度+px，
“宽度”：item.width+'px'，
“z索引”：999
};
}否则{
变量css={
“浮动”：“左”，
“左”：（item.width*索引+5）+“px”，
“位置”：“绝对”，
“高度”：项目高度，
“宽度”：item.width，
“显示”：“内联块”
};
}
返回css；
}
}