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

【问题标题】：How to Pass the data from Main Window to Child Window to display large data in table using AngulaJS如何使用 AngularJS 将数据从主窗口传递到子窗口以在表中显示大数据
【发布时间】：2017-03-26 10:31:24
【问题描述】：

嗨，目前我这个问题的主要目的是避免在 <td></td> 中显示大数据。因此，我不想通过单击表格元素在新窗口中显示数据。目前我正在使用 AngularJS 显示表格。我做了很多研究，但无法获得输出。

我希望以与此链接中所示类似的方式，但不是从输入框中获取值，而是从 td 单元格中的 ng-repeat 获取值，并且当单击单元格时，应该弹出新窗口向上

Passing Data to New window Tutorial

下面是我在其中传递大数据的表的演示

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

Demo of the large table

上面是我的桌子，你可以在桌子上看到。 DATA 列非常大（实际长度约为 500 个字符，但我显示的数据很少）所以我只想保持点击这里这种词。当用户点击时，它应该在新窗口中打开并显示数据。

【问题讨论】：

标签： html angularjs angularjs-ng-repeat html-table

【解决方案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;
    };
});

第三步：新建页面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 对话框（或）其他对话框的模态对话框，而不是新窗口

【讨论】：

它按我的要求工作，当用户单击一个单元格时，如果用户在不关闭当前窗口的情况下单击另一个单元格，是否会加载数据。它没有加载数据。你能帮帮我吗？
@Batman 我已经更新了上面的代码，这样它将为每一行打开一个单独的窗口。