angularjs - 使用 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