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

【问题标题】：angualrjs How to clone image with same position using .push?angularjs如何使用.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});
}

【问题讨论】：

标签： javascript angularjs angularjs-ng-repeat draggable angular-promise

【解决方案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;
        }

    }

【讨论】：