如何使用angularjs将元素从一个div移动到另一个div

问题描述：

我想将元素从一个div移动到另一个div。如何使用angularjs将元素从一个div移动到另一个div

比方说，例如DIV-A中有一个按钮，我想将它移动到DIV-B中。

它可以在jQuery中很容易做到像

$("div-b").append('button'); 
$("div-a button").remove();

但我不能想到哪里开始与AngularJs 1X。连续有一系列10-20 div，我想将按钮从一个div依次移动到另一个div。

['angular.element']（https://docs.angularjs.org/api/ng/function/angular.element）：“包装了原始DOM元素或HTML字符串作为jQuery元素。“ – str

我认为这可以单独使用angular的jqlite来完成。 – YOU

答

在角度数据被表示为对象

<div ng-repeat="a in ctrl.a"></div> 
<div ng-repeat="b in ctrl.b"></div> 

vm.a = ['a1', 'a2']; 
vm.b = []; 

function move(obj) { 
    // find obj in vm.a and remove 
    // push obj in vm.b 
}

那么该视图应被自动更新。

答

moveItem函数将所有子元素从一个div移动到另一个div。所有的事件和观察者都可以在这个过程中生存下去，这些元素仍然会在移动之前的控制器中，就像DOM中的其他地方一样。

需要的JQuery

var dom = angular.element($window.document); 
    var itemFrom = []; 
    var itemTo = []; 

    var moveItems = function (from, to) { 
     from.children().appendTo(to); 
    }; 

    var changeHeader = function() { 

     if (itemFrom.length === 0) { 
      itemFrom = dom.querySelectorAll("#itemFrom"); 
     } 
     if (itemTo.length === 0) { 
      itemTo = dom.querySelectorAll("#itemTo"); 
     } 

     moveItems(itemFrom, itemTo); 
    };

如何使用angularjs将元素从一个div移动到另一个div

相关推荐