gpt4 book ai didi

html - 复选标记不显示在 Window.print Angularjs 的复选框中

转载 作者:太空宇宙 更新时间:2023-11-04 08:38:52 25 4
gpt4 key购买 nike

我正在使用 AngularJs 来显示几个复选框。我有一个点击事件,它使用 document.write 将当前 html 写入窗口。但是,当打开新窗口进行打印时,没有选中任何复选框。

这是将文档打印到窗口的函数:

$scope.printForm = function () {
var doc = document.getElementById('myForm').outerHTML;
var myWindow = $window.open('', '', 'width=1100, height=1000');

myWindow.document.write(doc);
myWindow.print();
};

这是复选框的 HTML:

`<div ng-repeat="c in f.Choices" >
<input type="checkbox" ng-disabled="true" ng-model="c.isSelected" />&nbsp;&nbsp;{{c.vchDescription}} </div>`

这是我点击“printForm”之前的样子 enter image description here

这是我点击“printForm”后的样子:enter image description here

非常感谢任何帮助。

最佳答案

方法#1:生成 HTML

模型被传递给 print-button 指令。它生成 HTML 并将其写入打开的窗口。

SO 不允许打开新窗口。请参阅 Plunkr 上的工作示例.

方法#2:使用 CSS 媒体查询

无需打开新窗口。相应地为打印媒体设计文档样式。

angular.module('app', [])

.controller('AppController', function($window) {
this.options = [
{label: 'Foo', checked: false},
{label: 'Bar', checked: true}
];

// if you just need to print
this.print = function() {
$window.print();
};
})

// directive to generate HTML from model
.directive('printButton', function($window) {
return {
template: '<button ng-click="generate()">Open in new window</button>',
scope: {
data: '='
},
link: function(scope) {
scope.generate = function() {
var win = $window.open("", "bar", "width=200,height=100");
var html = '';
scope.data.forEach((val) => {
html += '<input type="checkbox"' + ((val.checked) ? ' checked=checked' : '') + '"/><label>'+val.label+'</label>';
})
win.document.write(html);
}
}
}
});
@media print {
.not-printable {
display: none;
}
}
<html ng-app="app" ng-controller="AppController as app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<h1 class="not-printable">This will not be printed</h1>
<div ng-repeat="opt in app.options">
<input type="checkbox" ng-model="opt.checked" /><label ng-bind="opt.label"></label>
</div>
<div class="not-printable">
<div print-button data="app.options"></div>
<button ng-click="app.print()">Simply print</button>
</div>
</body>
</html>

关于html - 复选标记不显示在 Window.print Angularjs 的复选框中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44268957/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com