Question

我想将一个元素从一个div移动到另一个div。

让我们说例如DIV-A中有一个按钮，我想在DIV-B中移动它。

可以像jQuery一样轻松完成

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

但是我无法想象在AngularJs 1x中从哪里开始。连续有一系列10-20个div，我想按顺序将按钮从一个div移动到另一个div。

Answer 1

在角度数据中表示为对象

<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
}

然后视图应该自动更新。

Answer 2

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

2 个答案: