angularjs如何使用.push克隆具有相同位置的图像？

Posted 2023-05-08

【中文标题】angularjs如何使用.push克隆具有相同位置的图像？

【英文标题】：angualrjs How to clone image with same position using .push?

【发布时间】：2017-08-13 13:18:27

【问题描述】：

我正在尝试在按键上创建图像副本。问题是当我将副本推送到我的对象数组以更改 css 左上位置时不起作用。我认为 ng-repeat 仍在加载 html。有没有办法让承诺或其他东西复制图像，并在 ng-repeat 添加我的新对象后更改 css？

  $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);

【参考方案1】：

角度$("#" + id).css(left: left, top: top);

这是行不通的，因为它是你可以使用的 Angular 的 jquery

document.getElementById("yourDivId"+id).style.top= top;
document.getElementById("yourDivId"+id).style.left= left;

【参考方案2】：

为了解决我的问题，我使用了 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;