如何使用AngulaJS将数据从主窗口传递到子窗口以在表中显示大数据 [英] How to Pass the data from Main Window to Child Window to display large data in table using AngulaJS
问题描述
目前我提出这个问题的主要目的是避免在 <td></td> 中显示大数据.因此，我想通过单击表格元素在新窗口中显示数据.目前我正在使用 AngularJS 显示表格.我做了很多研究，但无法获得输出.
我想以与此链接中显示的方式类似的方式，但不是从输入框中获取值，我想从 td 单元格中的 ng-repeat 获取值，并且当单击单元格时，应弹出新窗口向上
下面是我的表的演示，我在其中传递大数据
{{list.DATA}} 上面是我的桌子，正如你在表格中看到的那样.DATA 列非常大(实际长度大约为 500 个字符，但我显示的数据很少)所以我只想保持单击此处的字样.当用户点击时，它应该在新窗口中打开并显示数据.
您可以通过以下步骤做同样的事情:
注意:新窗口在 plunker 中不起作用.因此，您必须在本地实时尝试此操作.
我在以下 plunker 链接中更新了相同内容，
https://plnkr.co/edit/lQ92O3?p=preview
步骤 1:更改您的 第 2 步:在控制器中添加两个方法，如下所示 第 3 步:创建一个新页面 </html> 建议:您可以尝试使用 jquery 对话框(或)其他对话框代替新窗口 Hi Currently my main intention of the question is avoid displaying large data in the 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 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 I have updated the same in the following https://plnkr.co/edit/lQ92O3?p=preview Step 1: Change your Step 2: Add two methods in your controller as below Step 3: Create a new page Recommendation: Instead of new window you can try a modal dialog with jquery dialog (or) other dialogs 这篇关于如何使用AngulaJS将数据从主窗口传递到子窗口以在表中显示大数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ 如下 <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> var app = angular.module('studentApp', []);app.controller('StudentCntrl', function($scope,$http, $window) {$http.get('data.json').then(function (response){控制台日志(响应.数据.页面)；$scope.opMessageLogs = response.data});$scope.shortText = 函数(数据){if(data && data.length > 20) {返回 data.substring(0, 20) + '..';}返回数据；};$scope.showText = 函数(数据，索引){var $popup = $window.open("Popup.html", "popup" + index, "width=250,height=100,left=10,top=150");$popup.data = 数据；};});Popup.html 并在下面添加 html<头><title></title><身体><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;});<div ng-app="MyChildApp" ng-controller="MyChildController">数据:<span ng-bind="data"></span><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.<td>{{list.DATA}}</td>
plunker. So you have to try this in realtime in your local.plunker link,<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>
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 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>
登录
关闭
