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

Question

我正在使用AngularJs来显示一些复选框。我有一个click事件，它使用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”后，这就是它的样子：

非常感谢任何帮助。

Answer 1

Mehod＃1：生成HTML

将模型传递给List<Map<String, Long>> collect = docs.map(doc -> Pair.of(UUID.randomUUID(), doc)) .map(p -> p.getRight().collect(Collectors.groupingBy(Function.identity(), Collectors.counting()))) .collect(Collectors.toList()); 指令。它生成HTML并将其写入打开的窗口。

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

方法＃2：使用CSS媒体查询

无需打开新窗口。只需为打印介质设置样式文档。

print-button

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;
  }
}

Answer 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>