Raga Raga - 3 months ago 27
AngularJS Question

ng-if not really as intended

I'm trying to make a page print with

Angular
, using
ng-if
.



$scope.onBtnPrintClicked = function(journal, date) {
$scope.printTransaction = false;
$scope.current = new Date();
window.print()
};

$scope.onBtnPrintTransactionClicked = function(journal, date) {
$scope.printTransaction = true;
$scope.current = new Date();
window.print()
};

<button ng-click="onBtnPrintTransactionClicked(journal, selected.date)" class="btn btn-default btn-sm"><i class="fa fa-print"></i>&nbsp;Print</button>
<button ng-click="onBtnPrintClicked(journal, selected.date)" class="btn btn-default btn-sm"><i class="fa fa-print"></i>Print 2</button>


<section ng-if="printTransaction" class="printable journal-container">
<h1>PRINT</h1>
</section>
<section ng-if="!printTransaction" class="printable journal-container">
<div class="row">
<div class="col-sm-12">PRINT2</div>
</div>
</section>





But when I try to click print/print 2 it's showing different page/content.
What could be the problem?

Answer

From what I could understand from your question is that you're trying to print the current page, however the changes performed by your functions aren't completely load yet, so you could use setTimeout to make a little delay, as below:

(function() {
  angular
    .module('app', [])
    .controller('MainCtrl', MainCtrl);

  MainCtrl.$inject = ['$scope'];

  function MainCtrl($scope) {
    $scope.printTransaction = true;
    
    $scope.onBtnPrintClicked = function(journal, date) {
      $scope.printTransaction = false;
      $scope.current = new Date();
      setTimeout(function() {
        window.print();
      }, 500);
    };

    $scope.onBtnPrintTransactionClicked = function(journal, date) {
      $scope.printTransaction = true;
      $scope.current = new Date();
      setTimeout(function() {
        window.print();
      }, 500);
    };
  }
})();
<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
</head>

<body ng-controller="MainCtrl">
  <button ng-click="onBtnPrintTransactionClicked(journal, selected.date)" class="btn btn-default btn-sm"><i class="fa fa-print"></i>&nbsp;Print</button>
  <button ng-click="onBtnPrintClicked(journal, selected.date)" class="btn btn-default btn-sm"><i class="fa fa-print"></i>&nbsp;Print 2</button>
  <section ng-if="printTransaction" class="printable journal-container">
    <h1>PRINT</h1>
  </section>
  <section ng-if="!printTransaction" class="printable journal-container">
    <div class="row">
      <div class="col-sm-12">PRINT2</div>
    </div>
  </section>
</body>

</html>

Note: I don't know if these are your real functions, but you could simplify it and do it all in a single function.