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

前端未结

关注

 1  360

Hi Currently my main intention of the question is avoid displaying large data in the . So instead of that I want to display the data in the ne

相关标签:

1条回答

予麋鹿

2021-01-27 12:15

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

0 讨论(0)