如何使用角度

Question

我有一个表，我可以拖放元素，我想保存表，然后显示表中保存在索引上的所有值，只有从db保存。 我能够获得列和行的索引。但我在确定如何设置保存的特定索引值时的方法面临挑战。

表结构就像我从用户那里获得输入，输出列和行数的输入。所以我根据输入创建表..这就是为什么我为input_column，output_column和rows采用了三个独立的数组。还需要添加一些验证，因此采用单独的drop方法来删除输入和输出头。

这是我的controller.js

angular.module('myApp', []).controller('myCtrl', function($scope) {
   $scope.buttons = [1,2,3,4,5,6,7,8,9];
      $scope.tableSelection = {};
      $scope.tableInputColSelection={};
    $scope.tableOutputColSelection={};
    $scope.output_columns=[1];
    $scope.input_columns=[1];
      $scope.data = [];
      $scope.rows = [1, 2, 3]; 

      $scope.removeSelectedItems = function(){
       // $scope.rows = $scope.rows.filter(function(item, index){
         // return !($scope.tableSelection[index] !== undefined && $scope.tableSelection[index]); 
       if(Object.keys($scope.tableSelection).length>0){
                                 for (var i = $scope.rows.length - 1; i >= 0; i--) {
                                  if ($scope.tableSelection[i]) {
                                    //delete row from data
                                      if($scope.rows.length>1){
                                      $scope.rows.splice(i, 1);
                                      }

                                     delete $scope.tableSelection[i];
                                }
                                 }
                                }
                                if(Object.keys($scope.tableInputColSelection).length>0){
                                    for (var i = $scope.input_columns.length - 1; i >= 0; i--) {
                                      if ($scope.tableInputColSelection[i]) {
                                        //delete row from data
                                          if($scope.input_columns.length>1){
                                            $scope.input_columns.splice(i, 1);
                                          }
                                        delete $scope.tableInputColSelection[i];
                                      }
                                }

                                }
                                if(Object.keys($scope.tableOutputColSelection).length>0){
                                    for (var i = $scope.output_columns.length - 1; i >= 0; i--) {
                                      if ($scope.tableOutputColSelection[i]) {
                                        //delete row from data
                                          if($scope.output_columns.length>1){
                                            $scope.output_columns.splice(i, 1);
                                          }
                                        delete $scope.tableOutputColSelection[i];
                                      }
                                    }
                                }





      }
      $scope.addNewRow = function() {
        //set row selected if is all checked

        $scope.rows.push({
          id: $scope.rows.length,
          name: 'Name ' + $scope.rows.length
        });
      };
     $scope.addInput= function () {
                                for(var i=0;i<1;i++){
                                    $scope.input_columns.push({
                                        id:$scope.input_columns.length,
                                        name: 'Name'+$scope.input_columns.length
                                    });
                                    }
                            },

         $scope.addOutput= function () {
                                for(var i=0;i<1;i++){
                                    $scope.output_columns.push({
                                        id:$scope.output_columns.length,
                                        name:'Name'+$scope.output_columns.length
                                    });
                                    }
                            }


     $scope.handleDragEnd = function(e) {
            //debugger
            this.style.opacity = '1.0';
          };

          $scope.handleDragOver = function(e) {
            e.preventDefault(); // Necessary. Allows us to drop.
            e.dataTransfer.dropEffect = 'move'; // See the section on the DataTransfer object.
            return false;
          };
          $scope.handleHeaderDrop = function(e,item,index) {
             debugger
              var path = undefined;
              item.dropped=true;
              var data = e.dataTransfer.getData("text");
             e.target.innerHTML = data;
              e.preventDefault();
              e.stopPropagation();
              e.target.id=path; 


          };
           $scope.handleHeaderDropOutput = function(e,item,index) {
                  debugger
                  var path = undefined;
                  item.dropped=true;
                  var data = e.dataTransfer.getData("text");
                  e.target.innerHTML = data;
                  e.target.id=path;
                  e.preventDefault();
                  e.stopPropagation();

                };

    $scope.drag=  function (ev) {
        ev.dataTransfer.setData("text", ev.path[0].innerText);
        $scope.rhsContentProvider = new TreeContentProviderForXMI($scope.currentDictionaryModel.rhsDataDictionary);

    };
    $scope.allowDrop= function (ev) {
        if(ev!=false)
        ev.preventDefault();
    };
    $scope.drop=  function (ev,item,indx) {
    debugger
        ev.preventDefault();
        ev.stopPropagation();
        var path = undefined;//CCGBASE-2218 changes
        var data = ev.dataTransfer.getData("text");

    };
    });    

我已经为完整代码添加了plunker。虽然我无法设置我放在表格单元格上的按钮值。 在这里，我希望我能采用什么方法来获取我在每个单元格上删除的所有值，以便在从db中获取数据时使用相同的值再次设置表。

Plunker- http://plnkr.co/edit/MB2icqN9csG7RmJVMhyL?p=preview