对表ng-repeat中的每列使用单独的模型

Question

我喜欢创建一个表。对于此表中的每一列，我喜欢使用不同的模型。因此，如果我将一个元素放在我的两列中的一列中，它应该将该元素存储在模型中。 Here is link到我尝试过的小提琴页面。这是最简单的方法吗？

    <div ng-app="myApp" ng-controller="MyCtrl">

  <ul>
    <li ng-repeat="person in data">
      <div data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" jqyoui-draggable="{animate: true, placeholder: 'keep'}" ng-model="person">
        {{ person.name }}
      </div>
    </li>
  </ul>



  <table >
    <tr style="background-color:orange;">
      <td ng-model="src" data-drop="true" jqyoui-droppable="{multiple:true, onDrop: 'myDrop'}">Add your items here</td>
      <td ng-model="tar" data-drop="true" jqyoui-droppable="{multiple:true, onDrop: 'myDrop'}">Add your items here</td>
    </tr>
    <tr ng-repeat="person in src track by $index">
      <td >{{ person.name }}</td>
      <td >{{ tar[$index].name }}</td>
    </tr>
  </table>
</div>
<script>
var myApp = angular.module('myApp', ['ngDragDrop']);

myApp.controller('MyCtrl', function($scope, $timeout) {
  var src = [{
    name: 'bob'
  }, {
    name: 'mary'
  }];
  var tar = [{
    name: 'bob'
  }, {
    name: 'mary'
  }];
  $scope.people = [];
  $scope.people.src = [];
  $scope.people.tar = [];
  $scope.data = src;
  $scope.hideMe = function() {
    return $scope.people.src > 0;
  }
  $scope.myDrop = function(event, ui) {
    console.log($scope.people);
  }

});
</script>