Question

您好目前我的主要目的是避免在<td></td>中显示大数据。因此，我想通过单击表格的元素在新窗口中显示数据。目前我正在使用AngularJS显示表格。我做了很多研究，但没有得到输出。

我想以与此链接中显示的方式类似的方式，但是我没有从输入框中获取值，而是想从td单元格中获取ng-repeat的值，并且在单击单元格时应该弹出新窗口达

Passing Data to New window Tutorial

下面是我的表的演示，我在

中传递大数据

<td>{{list.DATA}}</td>

Demo of the large table

上面是我的桌子，正如您在表格中看到的那样。 DATA列非常大（实际上大约500个字符长度，但我显示的数据少一点）所以我只想点击这里的单词。当用户点击时，它应该在新窗口中打开并显示数据。

Answer 1

您可以通过以下步骤执行相同的操作：

注意：新窗口无法在plunker中工作。所以你必须在当地实时尝试这个。

我在以下plunker链接

中更新了相同的内容

https://plnkr.co/edit/lQ92O3?p=preview

第1步：更改<tr>，如下所示

<tr class="features" ng-repeat="list in opMessageLogs">
                        <td>{{list._id.$id}}</td>
                        <td>{{list.OPERATION}}</td>
                        <td>{{list.STATUS}}</td>
                        <td ng-click="showText(list.DATA, $index)">{{shortText(list.DATA)}}</td>
                    </tr>

第2步：在控制器中添加两个方法，如下所示

var app = angular.module('studentApp', []);

app.controller('StudentCntrl', function($scope,$http, $window) {
    $http.get('data.json').then(function (response){
                  console.log(response.data.pages);
                $scope.opMessageLogs = response.data
        });

    $scope.shortText = function(data) {
      if(data && data.length > 20) {
        return data.substring(0, 20) + '..';
      }

      return data;

    };

    $scope.showText = function(data, index) {
      var $popup = $window.open("Popup.html", "popup" + index, "width=250,height=100,left=10,top=150");
      $popup.data = data;
    };
});

第3步：创建新网页Popup.html并在html下面添加

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyChildApp', [])
        app.controller('MyChildController', function ($scope, $window) {
            $scope.data = $window.data;
        });
    </script>
    <div ng-app="MyChildApp" ng-controller="MyChildController">
        Data: <span ng-bind="data"></span>
    </div>
</body>
</html>

推荐：您可以尝试使用jquery对话框（或）其他对话框的模态对话框而不是新窗口

如何使用AngulaJS将数据从主窗口传递到子窗口以在表格中显示大数据

1 个答案: