Question

我需要在UI上显示excel数据，因为我使用了ui-grid并且能够在ui-grid中显示excel数据。但是只有一个工作表数据在ui-grid中加载。如果我正在使用具有多个工作表的Excel，我想在UI上的下拉列表中显示所有工作表名称，并且根据所选工作表，应该填充该工作表的相应数据。我能够在使用的指令中看到JSON格式的数据，但是我无法在下拉列表中填充工作表名称这是已经完成的事情的吸收者

http://plnkr.co/edit/9oU2dcOWtke8dt7PWSk6?p=preview

这是指令代码和控制器代码：

angular.module（＆＃39; app＆＃39;，[＆＃39; ui.grid＆＃39;]）

.controller('MainCtrl', ['$scope', function ($scope) {
  var vm = this;

  vm.gridOptions = {};

  vm.reset = reset;
  //I want to use that JSON in controller so that i can show the values in grid
  function reset() {
    vm.gridOptions.data = [];
    vm.gridOptions.columnDefs = [];
  }
}])

directive("fileread", [function () {
  return {
    scope: {
      opts: '='
    },
    link: function ($scope, $elm, $attrs) {
      $elm.on('change', function (changeEvent) {
        var reader = new FileReader();

        reader.onload = function (evt) {
          $scope.$apply(function () {
            var data = evt.target.result;

            var workbook = XLSX.read(data, {type: 'binary'});

//我想将工作簿对象传递给控制器，因为它具有所有必需的数据

            var headerNames = XLSX.utils.sheet_to_json( workbook.Sheets[workbook.SheetNames[0]], { header: 1 })[0];
            //I get all the sheet names of excel through workbook.SheetNames, I want to show this sheet names in dropdown and on basis
            //of the sheet selected it should load data of that sheet in the ui-grid, workbook.Sheets consists of data of all the Sheets present in Excel

$ scope.sheetName = workbook.SheetNames; //将工作表名称传递给范围变量 var data = XLSX.utils.sheet_to_json（workbook.Sheets [workbook.SheetNames [0]]）;

            $scope.opts.columnDefs = [];
            headerNames.forEach(function (h) {
              $scope.opts.columnDefs.push({ field: h });
            });

            $scope.opts.data = data;

            $elm.val(null);
          });
        };

        reader.readAsBinaryString(changeEvent.target.files[0]);
      });
    }
  }

在sheetNames中，我能够看到所有工作表名称，但在下拉列表中我得到一个空白下拉列表

这是HTML：

<!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" fileread="" opts="vm.gridOptions" multiple="true" />
            </div>
          </div>
        </div>
          <select ng-model="names" ng-options="names as names for names in sheetName"></select>
    <pre>
      {{sheetNames | json}}
    </pre><!-- Dropdown is coming blank-->
    </div>
      </div>
    </div>
    <script src="app.js"></script>
  </body>

</html>

请建议我如何达到要求，如何将Json或对象从指令传递给控制器。这将是一个很大的帮助。

Answer 1

您需要将sheetNames变量传递给指令。就像你如何通过opts。

我更新了plnkr，请查看以下内容

http://plnkr.co/edit/RQJW1D6iYjZmMEeSedCU?p=preview

Answer 2

在我脑海中浮现的唯一想法是使用服务来做到这一点。即使它是最简单的一个，只需给它一个属性和一个get / setter，你应该能够将你的数据从指令发送到你的控制器（当然，假设你在两个中都注入了它的依赖关系）组件）。

这里是：

angular
    .module('app')
    .factory('dataExchanger', dataExchanger);

dataExchanger.$inject = ['dependencies'];

/* @ngInject */
function dataExchanger(dependencies) {

    var data = {};

    var service = {
        getData: getData,
        setData: setData
    };
    return service;
    ////////////////
    function getData() {
        return data;
    }

    function setData(param) {
        data = param;
    }
}

Answer 3

我认为您的控制器不知道您所做的更改。

您正在调用$ scope.apply，但这只是获取指令来更新它的值？

尝试调用$ scope。$ root。$ apply（）。这解决了这种情况的问题，但我不确定这是否是一个好的模式。

如何通过角度js

3 个答案: