AngularjsとDragulaを使用して特定のJsonエントリに要素をドロップしますか？

Question

私はAngularjsとDragularを学んでいます。

私はデータセットを持っていますが、ドロップすると別のコンテナのデータセット値にデータを挿入する必要があります。たとえば：

これは、データが

$scope.items1 = [ 
     { 
      'name' : 'x', 
      'age' : '4' 
     }, 
     { 
      'name' : 'y', 
      'age' : '5' 
     }, 
     { 
      'name' : 'z', 
      'age' : '6' 
     } 
    ]; 

を設定し、私は items2値に items1の各要素をドロップしたいです。 items2は、次のようになります。それぞれに対して

{ 
    name:'aaa', 
    value: [{ 
      'key' : 'aaa', 
      'value' :"" 
     }] 
} 

：それは落ちています一度

$scope.items2 = [ 

     { 
      'key' : 'aaa', 
      'value' :"" 
     }, 
     { 
      'key' : 'bbb', 
      'value' : "" 
     }, 
     { 
      'key' : 'ccc', 
      'value' : "" 
     }, 
     { 
      'key' : 'ddd', 
      'value' : "" 
     } 

    ]; 

、items2は次のようになります。これはどうすればいいですか？ここで

Answer 1

は、可能な解決策の上にある：codepenへ

angular.module('myApp', ['dragularModule']).controller('MyCtrl', function(dragularService, $element, $scope, $timeout) { 
 
    $scope.items1 = [{ 
 
    name: 'x', 
 
    age: '4' 
 
    }, { 
 
    name: 'y', 
 
    age: '5' 
 
    }, { 
 
    name: 'z', 
 
    age: '6' 
 
    }]; 
 
    $scope.items2 = [ 
 

 
    { 
 
     'key': 'info', 
 
     'value': [] 
 
    }, { 
 
     'key': 'info', 
 
     'value': [] 
 
    }, { 
 
     'key': 'info', 
 
     'value': [] 
 
    }, 
 

 
    ]; 
 

 
    // timeout due to document not ready, jsfiddle settings issue? 
 
    $timeout(function() { 
 

 
    dragularService('#items1'); 
 
    dragularService('.items2'); 
 

 
    }); 
 

 
});

div { 
 
    border: 1px solid blue; 
 
    min-width: 200px; 
 
    padding: 10px 
 
} 
 

 
.can-be-empty { 
 
    min-height: 10px; 
 
    min-width: 200px; 
 
}

<link href="https://rawgit.com/luckylooke/dragular/master/dist/dragular.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://rawgit.com/luckylooke/dragular/master/dist/dragular.js"></script> 
 
<div class='app' ng-app="myApp" ng-controller="MyCtrl"> 
 
    <h2>items1</h2> 
 
    <div id="items1" class="can-be-empty"> 
 
    <div ng-repeat="item in items1">item {{item.name + ' age:' + item.age}}</div> 
 
    </div> 
 
    <h2>items2</h2> 
 
    <div ng-repeat="container in items2" class="items2"> 
 
    <div class="can-be-empty" ng-repeat="item in container.value"> 
 
     <div>item {{item.name + ' age:' + item.age}}</div> 
 
    </div> 
 
    </div> 
 
</div>

リンク：https://codepen.io/luckylooke/pen/LyoWzR