个人中心
gpt4 book ai didi

javascript - 如何通过 Angular js将json从指令传递到 Controller

转载 作者：行者123 更新时间：2023-11-30 00:00:31 26 4
gpt4 key购买 nike

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

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

这是指令代码和 Controller 代码:

angular.module('app', ['ui.grid'])

.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'});

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

            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]);
      });
    }
  }

enter image description here

在 sheetNames 中我可以看到所有的工作表名称，但是在下拉列表中我得到一个空白的下拉列表

enter image description here

这是 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 或对象从指令传递到 Controller 。这将是一个很大的帮助。

最佳答案

您需要将 sheetNames 变量传递给指令。比如你如何传递 opts。

我更新了 plnkr 检查下面

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

关于javascript - 如何通过 Angular js将json从指令传递到 Controller ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40717697/

26 4 0
文章推荐： android - 滚动时具有 Horizo​​ntalScrollview 的 ScrollView 滞后
文章推荐： java - 将 boolean 值绑定(bind)到复选框 MVVM
文章推荐： java - 如何使用 auto-value-gson 映射未知的 json 字段
文章推荐： android - 下面这个View，是用一个还是两个RecyclerView比较好？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com