Question

有一个将* .csv文件转换为JSON的函数。在函数中，我可以将此JSON打印到console.log console.log（jsonner）; 但我无法将其转移到Angular控制器。 $ scope.names = jsonner; 我有两个问题：如何等待功能，以及如何使var jsonner全局化。

function csvJSON(csv){

  var lines=csv.split("\n");
  var result = [];
  var headers=lines[0].split(",");

  for(var i=1;i<lines.length;i++){

      var obj = {};
      var currentline=lines[i].split(",");

      for(var j=0;j<headers.length;j++){
          obj[headers[j]] = currentline[j];
      }

      result.push(obj);

  }

  //return result; //JavaScript object
  return JSON.stringify(result); //JSON
}

function processFiles(files) {
    var file = files[0];
    var reader = new FileReader();
    reader.onload = function (e) {
    // Когда это событие активируется, данные готовы.
    // Вставляем их в страницу в элемент <div>
    var output = document.getElementById("fileOutput");   
    output.textContent = e.target.result;
    content = output.textContent;
    jsonner = csvJSON(content);
    console.log(jsonner);
};
    reader.readAsText(file);

}




var SearchApp = angular.module('SearchApp',[]);
 SearchApp.controller('ctrl2', ['$scope', function($scope){
    // Here the array would be your response.text:
    $scope.names = jsonner;

}]);

Answer 1

您$scope.names指向内存中的原始jsonner。您正在使用jsonner = csvJSON(content);创建新对象，因为它返回result数组。您必须修改原始数组才能让它以您想要的方式更新。

以下是帮助您入门的工作逻辑演示：Plunker Demo

不幸的是file输入不能与ng-change一起使用，但是有几个解决方法。你可以这样做：

<input id="fileInput" type="file" ng-model="files" onchange="angular.element(this).scope().processFiles(this)">

或者您可以使用自定义指令中的element.on('change', processFiles)来连接事件。这就是我的所作所为：

<body ng-controller="ctrl2">
  <input id="fileInput" type="file" ng-model="files" onchange="angular.element(this).scope().processFiles(this)">
  <div>{{ output }}</div>

  <div ng-repeat="todo in names track by $index" class="repeat">
      <div class="comname">{{todo.Name}}</div>
      <div class="price">{{todo.Price}}</div>
      <div class="change">{{todo.Change}}</div>
  </div>
</body>

和逻辑：

var SearchApp = angular.module('SearchApp', []);
SearchApp.controller('ctrl2', ['$scope', function ($scope) {
    $scope.processFiles = function (element) {
      var file = element.files[0];
      var reader = new FileReader();

      reader.onload = function (e) {
        // Need to notify angular of this event using $apply
        $scope.$apply(function() {
          // Когда это событие активируется, данные готовы.
          // Вставляем их в страницу в элемент <div>
          var output = document.getElementById("fileOutput");
          $scope.output = e.target.result;
          jsonner = csvJSON(e.target.result);
          console.log(jsonner);
          $scope.names = jsonner;
        });
      };

      reader.readAsText(file);
    };


}]);

如何在函数完成后获取全局对象的var

1 个答案: