Print the content from the selected tab in AngularJS UI tab

Question

Print the content from the selected tab in AngularJS UI tab

In my AngularJS application, I have implemented nested tabs and encountered an issue. I am trying to enable users to print the selected content list from both parent and child tabs. Is there a way to achieve this so that when a user clicks on "print list," the entire page is printed? Check out this link for reference.

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

javascript angularjs

Answer 1

Answer №1

If you click a button, you can create a directive that will display the content of the selected tab.

Example

<button show-tab-content="content">Employee Information</button>

Custom Directive

app.directive('showTabContent', function($document) {
  return {
    restrict: 'A',
    compile: function(element, attrs) {
      element.on('click', function(event) {
        console.log($document.find('#'+ attrs.showTabContent).find('.tab-pane.active').html());
        //add your code to print the content here
      });
    }
  }
});

See Demo on Plunkr

Answer 2

If you click a button, you can create a directive that will display the content of the selected tab.

Example

<button show-tab-content="content">Employee Information</button>

Custom Directive

app.directive('showTabContent', function($document) {
  return {
    restrict: 'A',
    compile: function(element, attrs) {
      element.on('click', function(event) {
        console.log($document.find('#'+ attrs.showTabContent).find('.tab-pane.active').html());
        //add your code to print the content here
      });
    }
  }
});

See Demo on Plunkr

Answer 3

Answer №2

If you need to print specific content, simply move that content into a child tab and wrap it in a div tag. This will allow you to print only the desired content. Take a look at this example on Plunker: http://embed.plnkr.co/tB1lUvIsL3TS8LGYmnCk/preview

Answer 4

If you need to print specific content, simply move that content into a child tab and wrap it in a div tag. This will allow you to print only the desired content. Take a look at this example on Plunker: http://embed.plnkr.co/tB1lUvIsL3TS8LGYmnCk/preview

Print the content from the selected tab in AngularJS UI tab

Answer №1

Answer №2

Similar questions

Reducing the size of textures in three.js

How can I prevent text highlighting on a website?

An issue occurred while trying to serialize cookies retrieved in getServerSideProps

Incorporate fresh data into an array organized by groups using Javascript

Using Regular Expressions in JavaScript to verify if an element from an array is contained within a string

A guide on breaking down a URL string containing parameters into an array with the help of JavaScript

When the `readonly` attribute is set to 'true' in the `md-chips` component, a placeholder must still be

What is causing my React-Testing Library queries to not work at all?

How to efficiently insert multiple documents into MongoDB using JavaScript

After the data has finished loading, AngularJS will apply the directive to each select tag every time

Unsubscribing from a service method in Javascript using RxJS

Clicking React useState causes it to update before the intended click is registered

Issue encountered: ENOENT - There is no file or directory located at the specified path for ... .steampath

Error: Koa.js framework is unable to find the "users" relation in the Sequelize database

What are the steps for creating a dropdown menu that allows for easy selection of the correct item

Obtaining specific data from the forEach iteration, post-click event with JavaScript

Testing the controllers of directives in Angular without exposing them globally through unit tests

In strict mode, duplicate data properties are not allowed in object literals when using grunt-connect-proxy

The process of extracting values from an HTML tag using Angular interpolation

In which part of my code should I implement the string to numerical function for my OrderBy function?