如何将角度控制器中的按键和值推入阵列

Question

我想根据用户提供的行数和列数来过滤数据。

我在从给定位置读取excel文件并且excel可能包含多个工作表后从控制器上获取数据。表格名称将以下拉菜单显示。

我想过滤行列数据的基础上通过列的标题名称，以便该行只有值，直到定义列。目前我正在获取整行值。

我写了这样的逻辑，这是行不通的。

var rowData=[]; 
for(var i=0;i<headerNames.length;i++){//headerNames contains column names 
    for(var j=0;j<data.length;j++){//data contains the rows data 
     for(var keyName in data[j]) 
     if(angular.equals(keyName,headerNames[i])){ 
      rowData.push({'keyName':data[j][keyName]})//I want only the key,values which matches the column names. I want to set the keyName value as array key but I am not getting its value instead it is coming like keyName:18 
     } 
     } 
    } 
} 

将代码添加到代码中。 http://plnkr.co/edit/28Z44xDBug7nFCQnKZJL?p=preview

我能够过滤UI上的数据并获得唯一的行和列的数据按照用户输入。 但我需要在控制器相同的数据，这样我可以将它保存在MongoDB中。我想根据列输入过滤行数据。所以，我只能得到行数据直到列被定义。

请建议我如何能过滤数据，并可以拼接行值，这样在排，我可以有值高达定义的列数。例如，如果用户输入了4行和5列，那么在我的行中，数据i可以只有值高达第5列，并且我可以从数组中删除所有其他值。在我的代码目前我无法获得键值设置为数组键。

请帮我解决这个问题。

Answer 1

你应该尝试改变这个在您的内循环：

var obj = {}; 
obj[keyName] = data[j][keyName]; 
rowData.push(obj); 

注：我也做在纸张选择一些改进，现在它默认为第一页，当你上传一个新的文件。 我也认为你的重置有问题，重置后它不接受新的工作簿，它只使用前一个。

// Code goes here 
 
angular.module('app', ['ui.grid']) 
 
    .controller('MainCtrl', ['$scope', function ($scope) { 
 
     var vm = this; 
 
     vm.gridOptions = {}; 
 
     vm.reset = reset; 
 
     vm.selectedSheet = ''; 
 
     vm.sheetIndex = 0; 
 
     function reset() { 
 
      vm.gridOptions.data = []; 
 
      vm.gridOptions.columnDefs = []; 
 
      vm.selectedSheet = ''; 
 
      vm.sheetIndex = 0; 
 
      vm.sheetNames = []; 
 
      vm.updatedData = null; 
 
     } 
 

 
     vm.readSheet = function() { 
 
      var workbook = XLSX.read(vm.data, { 
 
       type: 'binary' 
 
      }); 
 
      var headerNames = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[vm.sheetIndex]], { 
 
       header: 1 
 
      })[0]; 
 
      vm.sheetNames = workbook.SheetNames; //Passed the sheet names to scope variable 
 
      if(!vm.selectedSheet && vm.sheetNames && vm.sheetNames.length > 0) { 
 
       vm.selectedSheet = vm.sheetNames[0]; 
 
      } 
 
      var data = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[vm.sheetIndex]]); 
 
      var row = $scope.rowCount; 
 
      var col = $scope.columnCount; 
 
      if (col != undefined && col != '') { 
 
       headerNames.splice($scope.columnCount); 
 
      } 
 
      vm.gridOptions.columnDefs = []; 
 
      headerNames.forEach(function (h) { 
 
       vm.gridOptions.columnDefs.push({ 
 
        field: h 
 
       }); 
 
      }); 
 
      if (row != undefined && row != '') { 
 
       data.splice($scope.rowCount); 
 
      } 
 
      vm.gridOptions.data = data; 
 
      var rowData = []; 
 
      for (var i = 0; i < headerNames.length; i++) { 
 
       for (var j = 0; j < data.length; j++) { 
 
        for (var keyName in data[j]) { 
 
         if (angular.equals(keyName, headerNames[i])) { 
 
          var obj = {}; 
 
          obj[keyName] = data[j][keyName]; 
 
          rowData.push(obj);//Here I am trying to create 
 
          //an similar data kind array which will have only the row values upto 
 
          //the column defined. But in keyName I am not getting the key value 
 
          //Also please suggest is this the right approach. I need only the data 
 
          //here upto the row and column defined by user so that I can save that data 
 
          //to mongoDB 
 
         } 
 
        } 
 
       } 
 
      } 
 
      vm.updatedData = rowData; 
 
     }; 
 
     vm.onLoadData = function (data) { 
 
      vm.data = vm.data || data; 
 
      vm.readSheet(); 
 
     }; 
 
     vm.sheetChange = function() { 
 
      vm.sheetIndex = vm.sheetNames.indexOf(vm.selectedSheet); 
 
      vm.readSheet(); 
 
     }; 
 
     $scope.$watch('columnCount', function(newVal, oldVal) { 
 
      if(newVal !== oldVal) { 
 
       vm.readSheet(); 
 
      } 
 
     }); 
 
     $scope.$watch('rowCount', function(newVal, oldVal) { 
 
      if(newVal !== oldVal) { 
 
       vm.readSheet(); 
 
      } 
 
     }); 
 
    }]) 
 
    .directive("fileread", [function() { 
 
     return { 
 
      scope: { 
 
       onLoadData: '&' 
 
      }, 
 
      link: function ($scope, $elm, $attrs) { 
 
       $elm.on('change', function (changeEvent) { 
 
        var reader = new FileReader(); 
 
        reader.onload = function (evt) { 
 
         $scope.$apply(function() { 
 
          $scope.onLoadData({ 
 
           data: evt.target.result 
 
          }); 
 
          $elm.val(null); 
 
         }); 
 
        }; 
 
        reader.readAsBinaryString(changeEvent.target.files[0]); 
 
       }); 
 
      } 
 
     } 
 
    }]);

/* Styles go here */ 
 

 
body { 
 
    /* font-family: Verdana; */ 
 
    padding: 20px; 
 
} 
 

 
.grid { 
 
    width: 100%; 
 
    height: 250px; 
 
} 
 

 
.grid-msg-overlay { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    background: rgba(0, 0, 0, 0.4); 
 
} 
 

 
.grid-msg-overlay .msg { 
 
    opacity: 1; 
 
    position: absolute; 
 
    top: 20%; 
 
    left: 20%; 
 
    width: 60%; 
 
    height: 50%; 
 
    background-color: #eee; 
 
    border-radius: 4px; 
 
    border: 1px solid #555; 
 
    text-align: center; 
 
    font-size: 24px; 
 
    display: table; 
 
} 
 

 
.grid-msg-overlay .msg > .center { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 

 
.grid input[type="file"] { 
 
    font-size: 14px; 
 
    display: inline-block; 
 
}

<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
    <head> 
 
    <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.js"></script> 
 
    <script src="https://cdn.rawgit.com/SheetJS/js-xlsx/v0.8.0/dist/xlsx.full.min.js"></script> 
 
    <script src="https://cdn.rawgit.com/SheetJS/js-xlsx/v0.8.0/dist/ods.js"></script> 
 
    <script src="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.22/ui-grid.min.js"></script> 
 
    <link rel="stylesheet" href="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.22/ui-grid.min.css" /> 
 
    <link rel="stylesheet" href="main.css" type="text/css" /> 
 
    </head> 
 

 
    <body> 
 
    <div ng-controller="MainCtrl as vm"> 
 
     <button type="button" class="btn btn-success" ng-click="vm.reset()">Reset Grid</button> 
 
     <br /> 
 
     <br /> 
 
     <div id="grid1" ui-grid="vm.gridOptions" class="grid"> 
 
     <div class="grid-msg-overlay" ng-show="!vm.gridOptions.data.length"> 
 
      <div class="msg"> 
 
      <div class="center"> 
 
       <span class="muted">Select Spreadsheet File</span> 
 
       <br /> 
 
       <input type="file" accept=".xls,.xlsx,.ods" multiple="true" fileread="" on-load-data="vm.onLoadData(data)"/> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div ng-show="vm.sheetNames && vm.sheetNames.length > 0"> 
 
     <br/> 
 
     <div ng-show="vm.sheetNames.length > 1"> 
 
      <select ng-model="vm.selectedSheet" ng-options="names as names for names in vm.sheetNames" 
 
      ng-change="vm.sheetChange()"></select> 
 
     </div> 
 
     <br/> 
 
     <label>Column: 
 
      <input type="text" name="col" ng-model="columnCount"> 
 
     </label> 
 
     <br/> 
 
     <label>Row: 
 
      <input type="text" name="row" ng-model="rowCount"> 
 
     </label> 
 
     <br/><br/> 
 
     <div ng-show="vm.updatedData"> 
 
      <label>Updated result:</label> 
 
      <div>{{vm.updatedData}}</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <script src="app.js"></script> 
 
    </body> 
 

 
</html>

Plunker update