Window.printのチェックボックスにチェックマークが表示されないAngularjs

AngularJsを使用していくつかのチェックボックスを表示しています。私はdocument.writeを使用して現在のHTMLをウィンドウに書き込むclickイベントを持っています。ただし、新しいウィンドウが印刷用に開くと、チェックボックスはチェックされません。ここで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

新しいウィンドウでドキュメントが角度のアプリではありません。 –

それは理にかなっています。どのように問題を解決するための任意のアイデア？ –

なぜ新しいウィンドウが必要ですか？あなたのスタイルシートに '@media print'を置くだけで十分ですか？ –

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

出典

2017-05-30 20:16:17

Mehod＃1：

モデルがprint-buttonディレクティブに渡されるHTMLを生成します。 HTMLを生成し、それを開いたウィンドウに書き込みます。

新しいウィンドウを開くことはできません。 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を使って印刷するのはチェックボックスだけです。 –

印刷のために別のページの外観が必要な場合は、編集済みの回答を参照してください。私は 'print'メソッドをコントローラといくつかのCSSに追加して、印刷されたドキュメントに表示したくない要素を隠してしまいました。その場合、指示は必要ありません。 –

ありがとうございますが、$ window.print（）は表示されているものだけを表示し、他のものはすべて表示しません。私はあなたのお手伝いを感謝します。 –

Window.printのチェックボックスにチェックマークが表示されないAngularjs

答えて

関連する問題