打印表单提交答案

【问题标题】：Printing out form submission打印表单提交
【发布时间】：2016-06-30 17:35:12
【问题描述】：

我想打印出用户填写的表格。但是当按下打印按钮时，只会打印出输入的默认值。我使用角度。有谁知道如何打印出填写的表格，而不必将每个输入字段（我有很多）附加到 docToPrint.document.write？

$rootScope.printDiv = function(divName) {
                var printContents = document.getElementById(divName).innerHTML;
                var docToPrint = window.open('', '_blank', 'width=700,height=400');
                docToPrint.document.open();
                docToPrint.document.write('<html><head><link rel="stylesheet" type="text/css"/></head><body onload="window.print()">' + printContents + '</html>');
                docToPrint.document.close();
};

【问题讨论】：

标签： javascript angularjs forms

【解决方案1】：

我不知道这是否符合您的要求，但我有这件作品

 ng-click="window.print();"

这将打开包含所有视图的打印屏幕，您可以从那里打印它

【讨论】：

【解决方案2】：

在 Angular 中，我们有 $scope 的概念，它位于控制器和视图之间。所以你可以做什么，可以在控制器中创建一个表单模型，并为每个字段设置一些默认值。现在您制作一个表单并将该模型与它绑定。因此，每个字段都将填充您在控制器中给出的一些默认值。现在，当您按下打印按钮时，模型将拥有所有更新的值，其余的将是默认值。

示例如下：

控制器

angular.module('mainModule', [])
.conroller('formCntrl', function($scope) {
   $scope.model = {
      name: 'Dummy Name',  // these are some default values
      age: 20,
      address: 'XyZ',
      profession: 'Abc'
   };

   $scope.submitForm = function() {
      /* here you can play with $scope.model which will have all updated values and if any field is not touched then it will have default value for it which is given above  */
   };

});

html

<html>
<body ng-app="mainModule">
   <div ng-controller="formCntrl">
   <form name="regForm">
     Name: <input type="text" ng-model="model.name" name="name" /><br>
     Age: <input type="text" ng-model="model.age" name="name" /><br>
     Address: <input type="text" ng-model="model.address" name="name" /><br>
     Profession: <input type="text" ng-model="model.profession" name="name"/><br>
    <input type="button" value="Print" ng-click="submitForm()" />
   <form>
   </div>
</body>
</html>

【讨论】：

我明白了！但是为什么一定要先在控制器中指定呢？ ng-model 不会自动创建你分配给作用域的变量吗？
是的，但是你将如何配置默认值呢？模型是在控制器中创建的，因此我们可以为每个字段提供一些默认值。否则你也可以跳过它。

【解决方案3】：

这将适合您的要求。 https://dzone.com/articles/building-simple-angularjs

     myApp.controller('LoginCtrl', function($scope,$window) {
         $scope.print=function(){       
         $window.print();
       }

【讨论】：