复选标记未显示在 Window.print Angularjs 的复选框中答案

【问题标题】：Checkmarks don't show in checkbox on Window.print Angularjs复选标记未显示在 Window.print Angularjs 的复选框中
【发布时间】：2017-05-31 04:47:02
【问题描述】：

我正在使用 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”之前的样子

这是我点击“printForm”后的样子：

非常感谢任何帮助。

【问题讨论】：

新窗口中的文档不是 Angular 应用程序。
这是有道理的。关于如何解决这个问题的任何想法？
为什么需要一个新窗口？在您的样式表中包含@media print 还不够吗？
或者你可以创建一个指令来从你的模型生成 HTML。
我不确定如何使用它。我看到的每个使用 Angular 打印 Html 的示例都按照我在这里的方式进行。如果您有更好的方法，请务必分享。它可能会帮助很多人。谢谢！

标签： html angularjs css checkbox

【解决方案1】：

方法#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>

【讨论】：

感谢您的帮助。如果页面上唯一的东西是复选框，它会很好用。但是，我的应用程序中的复选框实际上通常包含几个可打印的信息页。在这里使用你的指令plnkr.co/edit/NgODZp3N3D1vZXgU8Hci?p=preview，唯一打印的是复选框。
如果您只想使用不同的页面进行打印，请查看已编辑的答案。我在控制器和一些 CSS 中添加了 print 方法来隐藏您不想出现在打印文档中的元素。在这种情况下，您不需要指令。
谢谢，但 $window.print() 只打印可见的内容并切断其他所有内容。非常感谢您提供的帮助。
然后用所有需要的 HTML 修改 printButton 指令并将整个模型传递给它。否则你做的不是有角度的。
您还可以在同一页面中创建可打印视图。 <div ng-if="printable"></div><button ng-click="printable = !printable">Print preview</button>

【解决方案2】：

偶然发现了这个。更改 ng-model="c.isSelected" tp ng-checked="c.isSelected" 允许复选标记显示在复选框中。

下面的简单代码更改解决了它：

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

【讨论】：