从PapaParse得到的数组没有填写ng-repeat

时间:2017-01-15 02:26:19

标签: javascript angularjs csv papaparse

我正在尝试上传一个csv,然后通过PapaParse将其运行到JSON中。在PapaParse之后我将它存储为$ scope.dataTable并且它正确地记录到控制台但它没有填充我的ng-repeat而我无法找出原因。

var app = angular.module('rainApp', []);
app.controller('mainCtrl', function($scope) {
    $scope.dataTable = [];

    $scope.csv = document.getElementById("file-input");

    function buildTable(a) {
        $scope.dataTable = a;
        console.log($scope.dataTable);
    }

    function dataToJson(data, callback) {
        Papa.parse(data, {
            header: false,
            complete: function(results) {
                callback(results.data);
            }
        });
    }

    $scope.csv.addEventListener("change", function() {
        data = this.files[0];
        dataToJson(data, buildTable);
    });
});

和HTML(我加载上面的角度脚本)

  <div ng-controller="mainCtrl">
    <input id="file-input" type="file" accept=".csv" />
<div ng-repeat="item in dataTable">
  <h1>{{item}}</h1>
</div>

  </div>

console.log中的JSON内容

[
  {
    "Township": "T024R01W5",
    "Date": "1955-01-01",
    "Precip. (mm)": "0.8"
  },
  {
    "Township": "T024R01W5",
    "Date": "1955-01-02",
    "Precip. (mm)": "0.3"
  },
  {
    "Township": "T024R01W5",
    "Date": "1955-01-03",
    "Precip. (mm)": "0.0"
  },
  {
    "Township": "T024R01W5",
    "Date": "1955-01-04",
    "Precip. (mm)": "0.0"
  },
  {
    "Township": "T024R01W5",
    "Date": "1955-01-05",
    "Precip. (mm)": "0.0"
  },
  {
    "Township": "T024R01W5",
    "Date": "1955-01-06",
    "Precip. (mm)": "0.0"
  },
  {
    "Township": "T024R01W5",
    "Date": "1955-01-07",
    "Precip. (mm)": "0.0"
  },
  {
    "Township": "T024R01W5",
    "Date": "1955-01-08",
    "Precip. (mm)": "0.0"
  },
  {
    "Township": "T024R01W5",
    "Date": "1955-01-09",
    "Precip. (mm)": "0.0"
  },
  {
    "Township": "T024R01W5",
    "Date": "1955-01-10",
    "Precip. (mm)": "0.0"
  },
  {
    "Township": "T024R01W5",
    "Date": "1955-01-11",
    "Precip. (mm)": "0.0"
  },
  {
    "Township": "T024R01W5",
    "Date": "1955-01-12",
    "Precip. (mm)": "0.0"
  },
  {
    "Township": "T024R01W5",
    "Date": "1955-01-13",
    "Precip. (mm)": "2.3"
  },
  {
    "Township": "T024R01W5",
    "Date": "1955-01-14",
    "Precip. (mm)": "0.0"
  },
  {
    "Township": "T024R01W5",
    "Date": "1955-01-15",
    "Precip. (mm)": "0.0"
  },
  {
    "Township": "T024R01W5",
    "Date": "1955-01-16",
    "Precip. (mm)": "0.0"
  },
  {
    "Township": "T024R01W5",
    "Date": "1955-01-17",
    "Precip. (mm)": "0.8"
  },
  {
    "Township": ""
  }
]

1 个答案:

答案 0 :(得分:1)

$ scope.dataTable = a; 之后 尝试添加这个新行:

$ $范围应用();