2017-01-21 14 views
-1

私は角度jsでcsvファイルを読み込もうとしていますが、私はこの質問How to read csv file content in angular js?を持っています。それはdirectiveとして使用されています。しかし、私はそれを私のコントローラーのフォームとして送信しています。私のフォームで使用することができます。誰も助けを提案することができます。ありがとうございます。angularjsでcsvファイルを読む方法

私のコード、

if($scope.partner.csv){ 
      var files = $scope.partner.csv.target.files 
      var r = new FileReader(); 
      r.onload = function(e) { 
       var contents = e.target.result; 
       $scope.$apply(function() { 
       $scope.fileReader = contents; 
       }); 
      }; 
     } 
     } 

これはcsvファイルは、上記の動作が行われる必要があり、アップロードされた場合、私は自分のフォームを送信するとき、私は、しようとしたものです。

+0

は正確にあなたが「私のcontroolerのフォームとして、それをsubmittiong」ん何を意味し、これは – charlietfl

+0

を動作するはずですどのように達成しようとしているのかについてのより多くの詳細を提供してください?英語が間違っているという事実だけでなく、 CSVファイルはどのようにフォームに関連していますか? – Claies

+0

CSVファイルから配列を作成すると便利ですか? – Randy

答えて

1

以下のコードを使用してcsvファイルを読み取ることができます。

<!DOCTYPE html> 
<html ng-app="" ng-controller="myCtrl"> 
<style> 
table, th, td { 
    border: 1px solid black; 
    padding:5px; 
} 
table { 
    border-collapse: collapse; 
    margin:10px; 
} 
</style> 
<body> 
<button ng-click="readCSV()"> 
Display CSV as Data Table 
</button> 
<div id="divID"> 
    <table> 
    <tr ng-repeat="x in data"> 
     <td ng-repeat="y in x">{{ y }}</td> 
    </tr> 
    </table> 
</div> 
<div> 
<table> 
</table> 
</div> 
<script> 
function myCtrl($scope, $http) { 
    $scope.readCSV = function() { 
     // http get request to read CSV file content 
     $http.get('/angular/sample.csv').success($scope.processData); 
    }; 

    $scope.processData = function(allText) { 
     // split content based on new line 
     var allTextLines = allText.split(/\r\n|\n/); 
     var headers = allTextLines[0].split(','); 
     var lines = []; 

     for (var i = 0; i < allTextLines.length; i++) { 
      // split content based on comma 
      var data = allTextLines[i].split(','); 
      if (data.length == headers.length) { 
       var tarr = []; 
       for (var j = 0; j < headers.length; j++) { 
        tarr.push(data[j]); 
       } 
       lines.push(tarr); 
      } 
     } 
     $scope.data = lines; 
    }; 
} 
</script> 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> 
</body> 
</html> 
関連する問題