Question

以下是我的角色剧本：

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

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

  vm.gridOptions = { multiSelect:false};

  vm.reset = reset;
  function reset() {
    vm.gridOptions.mydata = [];
    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 mydata = evt.target.result;

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

            var headerNames = XLSX.utils.sheet_to_json( workbook.Sheets[workbook.SheetNames[0]], { header: 1 })[0];

            var mydata = 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 = mydata;

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

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

app.controller('MainCtrl', ['$scope', '$http', '$interval', 'uiGridConstants', function ($scope, $http, $interval, uiGridConstants) {

  $scope.mySelections = [];


  $scope.gridOptions.multiSelect = false;
  $scope.gridOptions.modifierKeysToMultiSelect = false;
  $scope.gridOptions.noUnselect = true;
  $scope.gridOptions.onRegisterApi = function( gridApi ) {
        $scope.gridApi = gridApi;
         $scope.gridApi.selection.on.rowSelectionChanged($scope, function(rows) {
         $scope.mySelections = $scope.gridOptions.data[0];
        var v =  {mySelections};
        var z = document.getElementById("t");
        z.innerHTML.append = v;

        });

  }

  $scope.toggleRowSelection = function() {
    $scope.gridApi.selection.clearSelectedRows();
    $scope.gridOptions.enableRowSelection = !$scope.gridOptions.enableRowSelection;
    $scope.gridApi.core.notifyDataChange( uiGridConstants.dataChange.OPTIONS);
  };

  $http.get('/mydata/500_complex.json')
    .success(function(mydata) {
      $scope.gridOptions.data = mydata;
      $scope.gridOptions.multiSelect.data = false;        

      // $interval whilst we wait for the grid to digest the data we just gave it
      $interval( function() {
          $scope.gridApi.selection.selectRow($scope.gridOptions.data[0]);}, 0, 1);
          $scope.mySelections = $scope.gridOptions.data[0];
        var v =  {mySelections};
        var z = document.getElementById("t");
        z.innerHTML.append = v;    
    });
}]);

以下是我的HTML代码：

<!DOCTYPE html>
<html ng-app="app">

  <head>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.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" ui-grid-selection 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="false" />
            </div>
          </div>
        </div>
      </div>
    </div>

<script src="app.js"></script>
 <br />
 **<textarea id = "t" style="width:100%"></textarea>**
 <br/>
     <button id="copy" name="copy" type="button" class="btn btn-success" ng-click="vm.copy()">Copy</button>
  </body>

</html>

我想在textarea中显示所选行。一次选择行，但无法在textarea中显示数据？任何建议都是我初学者所赞赏的。

UI网格行数据到Textarea

0 个答案: