如何将数据从主窗口传递到子窗口以使用AngulaJS在表格中显示大数据 [英] How to Pass the data from Main Window to Child Window to display large data in table using AngulaJS
问题描述
嗨目前我的主要目的是避免在< td>< / td> 中显示大数据。因此，我想通过单击表格的元素在新窗口中显示数据。目前我正在使用AngularJS显示表格。我已做了很多研究，但无法获得输出。
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想要从td单元格中的ng-repeat获取值，并且当单击单元格时，应该弹出新窗口
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
下面是我的表的演示，我在
Below is the demo of the my table where I am passing the large data in
<td>{{list.DATA}}</td>
上面是我的桌子，正如你在表中看到的那样。 DATA列非常大（实际上大约500个字符长度，但我显示的数据少一点）所以我只想点击这里的单词。当用户点击时，它应该在新窗口中打开并显示数据。
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:
注意：新窗口无法在 plunker 中使用。因此，您必须在当地实时尝试此操作。
Note: New window won't work in the plunker. So you have to try this in realtime in your local.
我在以下 plunker 链接中更新了相同内容，
I have updated the same in the following plunker link,
https://plnkr.co / edit / lQ92O3？p =预览
第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步：在控制器中添加两个方法，如下所示
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;
};
});
第3步：创建新页弹出窗口.html 并添加以下 html
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>
推荐：您可以尝试使用jquery进行模态对话，而不是使用新窗口对话框（或）其他对话框
Recommendation: Instead of new window you can try a modal dialog with jquery dialog (or) other dialogs
这篇关于如何将数据从主窗口传递到子窗口以使用AngulaJS在表格中显示大数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
