angularjs를 사용하여 한 div에서 다른 div로 요소를 이동하는 방법

Question

한 div에서 다른 div로 요소를 이동하려고합니다.

예를 들어 DIV-A에 버튼이 있고 DIV-B로 이동하려고합니다.

그것은 쉽게

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

처럼 jQuery를 수행 할 수 있습니다하지만 어디 AngularJS와 1 배에서 시작하는 생각할 수 없습니다입니다. 일련의 10-20 개의 div가 연속적으로 있고 버튼을 한 div에서 다른 div로 순차적으로 이동하려고합니다.

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

가 표현된다.

Answer 2

moveItem 함수는 모든 div 요소의 자식 요소를 다른 div 요소로 이동합니다. 모든 이벤트와 관찰자가이 부분에서 살아남습니다. 요소는 여전히 컨트롤러에 있습니다. 이동하기 전에 DOM의 다른 위치에 있습니다. "원시 DOM 요소 또는 HTML 문자열 랩

는

가

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