使用Angularjs和Dragula在特定的Json條目上放置元素？

Question

我正在學習Angularjs和Dragular。

我有一個數據集，並在我必須插入數據到另一個容器的數據集值。例如：

這是該數據集

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

我想的items1每個元素放到items2值。 items2樣子：

$scope.items2 = [ 

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

    ]; 

一旦它下跌，items2應該是這樣的：

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

的每一個。我該怎麼做呢？

Answer 1

這裏是一個可能的解決方案：

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>

鏈接codepen：https://codepen.io/luckylooke/pen/LyoWzR