複選框不顯示Window.print Angularjs

我正在使用AngularJs來顯示一些複選框。我有一個點擊事件，它使用document.write將當前html寫入窗口。但是，當打開新窗口進行打印時，不會選中任何複選框。複選框不顯示Window.print Angularjs

這裏是一個打印文檔的窗口功能：

$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」後的樣子：

非常感謝任何幫助。

來源

2017-05-30 Rani Radcliff

文獻在新窗口中不形成棱角應用程序。 –

這很有道理。任何想法如何解決這個問題？ –

爲什麼你需要一個新窗口？在你的樣式表中有@ @ @ print打印嗎？ –

想通這一個意外。更改ng-model="c.isSelected" tp ng-checked="c.isSelected"允許複選框顯示在複選框中。下面

Simple代碼變化解決它：

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

來源

2017-05-30 20:16:17

Mehod＃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>

來源

2017-05-30 19:03:57

感謝您的幫助。如果頁面上唯一的東西是複選框，它會很好用。但是，實際上通常會在我的應用程序中的複選框中包含幾個可打印的信息頁面。在這裏使用你的指令http://plnkr.co/edit/NgODZp3N3D1vZXgU8Hci?p=preview，唯一打印的是複選框。 –

如果您只是希望在不同的頁面上打印，請參閱已編輯的答案。我向控制器和一些CSS添加了'print'方法來隱藏你不想出現在打印文檔中的元素。在這種情況下你不需要指令。 –

謝謝，但$ window.print（）只打印可見的東西並切斷其他所有東西。我很感激你的幫助。 –

複選框不顯示Window.print Angularjs

回答

相關問題