How to Pass the data from Main Window to Child Window to display large data in table using AngulaJS

Hi Currently my main intention of the question is avoid displaying large data in the <td></td> . So instead of that I want to display the data in the new window by clicking on the element of the table. Currently I am displaying the table using the AngularJS. I have done much research but not able to get the output.

I want in the similar way as show in this link, But instead of getting the value from Input box I want to get the value from ng-repeat in the td cell and ,when the cell is clicked new window should be popped up

Passing Data to New window Tutorial

Below is the demo of the my table where I am passing the large data in

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

Demo of the large table

Above is my table ,as you can see in the table. DATA column is very large(Around 500 Characters length in real but i have shown little less data) so I just want to keep click here kind of word. When user clicks then it should open in the new window and show the data.

You can do the same thing with below steps:

Note: New window won't work in the plunker. So you have to try this in realtime in your local.

I have updated the same in the following plunker link,

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

Step 1: Change your <tr> as below

<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>

Step 2: Add two methods in your controller as below

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

Step 3: Create a new page Popup.html and add below 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>

Recommendation: Instead of new window you can try a modal dialog with jquery dialog (or) other dialogs

来源：https://stackoverflow.com/questions/40560760/how-to-pass-the-data-from-main-window-to-child-window-to-display-large-data-in-t

标签

html

angularjs

angularjs-ng-repeat

html-table