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

我正試圖在按鍵上創建圖像的副本。問題是，當我將.push複製到我的對象數組以更改css left top position不起作用時。我認爲ng-repeat仍在加載html。有沒有一種方法來承諾或其他東西來製作圖像的副本，並且在ng-repeat添加我的新對象後更改css？angualrjs如何使用.push克隆具有相同位置的圖像？

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

來源

2017-03-21 Jayson Vinicius

爲了解決我的問題，我用NG-風格=「的getStyle（$指數，項目）「，我稱之爲功能。任何時候我將新對象推入數組，ng重複調用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; 
     } 

    }

來源

2017-03-22 14:10:09

在角$("#" + id).css({left: left, top: top});

這不會工作，因爲它是jQuery的對角，您可以使用

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

來源

2017-03-21 17:59:14 Aman

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

回答

相關問題