A step-by-step guide on how to exclusively print items that have been selected using a checkbox in AngularJS

I have created two tables and added a checkbox for each one.

Instead of default checkboxes, I have used images that change when clicked. Here is the code snippet:

<button class="btn btn-lg btn-customPrint-md no-print" ng-click="checkBoxPrint2 = !checkBoxPrint2"><i class="fa fa-1x" ng-class="checkBoxPrint2 ? 'fa-square-o' : 'fa-check-square-o'"></i></button>

So, when clicked, it changes the FontAwesome icon.

Additionally, there is a Print Button to print the page according to the print css rules:

 <button class="btn btn-lg btn-custom-md pull-right" ng-click="vm.$window.print()"><i class="fa fa-print fa-2x"></i></button>

Now, my question is how can I make it print ONLY the tables with the checkbox checked (meaning with "fa-check-square-o" icon)? My initial thought was using ng-class to add a "noPrint" class to hide the element from printing. Does this approach sound logical?

htmlcssangularjscheckbox

Answer №1

If you have boolean properties, you can utilize ng-show or ng-hide to display or conceal tables accordingly.

Although I may not fully grasp your query, a straightforward example would be as follows:

$scope.showElement = false;

<div ng-show="showElement">This element will only appear if the variable is true.</div>

In your scenario, consider using checkBoxPrint2 as an expression for ng-show/hide on specific elements you wish to hide. For instance, you could opt to always show headers while hiding the content.

For further guidance and examples, refer to:

https://www.w3schools.com/angular/ng_ng-show.asp

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to override Bootstrap or not?

It's quite a puzzle to figure out when I can and cannot override Bootstrap classes or IDs with custom CSS. For instance, it seems easy enough to change the default navbar-dark background and font style, but altering the font color and size proves to ...

csssassbootstrap-4

Attempting to execute JavaScript within HTML files that have been incorporated using Angular

My website has a menu designed in HTML, and instead of manually adding it to each page (which would make updating changes tedious), I am using Angular to include it dynamically (<div ng-include="menu.html"></div>). I've got some JavaScrip ...

javascripthtmlangularjs

displaying a div upon checking the checkbox

How can I make a div push the content below it when it is in the show state? Currently, when I check the checkbox, the textarea covers the submit button, hiding it. Is there a way for the textarea to push the button down instead? You can find my code here: ...

jqueryhtmlcss

PHP not displaying radio button values

My latest project involved creating a quiz program using only PHP. The program consists of 4 different questions and radio buttons, and when an option is selected, the value of the radio button (A, B, C, or D) should be printed. I have set up 4 PHP varia ...

phphtmlphp-7.3

In JavaScript, a prompt is used to request the user to input a CSS property. If the input is incorrect,

Implement a while loop that continuously prompts the user to enter a color. If the color entered matches a CSS property such as blue, red, or #000000: The background will change accordingly, but if the user enters an incorrect color, a message will be dis ...

javascriptcss

Chatting with AngularJS while engaging in peculiar polling

In my project, I developed a basic chat feature using AngularJS for the frontend. The user interface displays an index on the left side with all conversations the user has. By clicking on a conversation, the corresponding chat opens on the right side, and ...

angularjs

Is the security of Angular's REST authentication reliable?

My goal is to establish a secure connection with a REST service using Angular. I have come across the official method, which involves setting the authentication ticket like this: $httpProvider.defaults.headers.common['Authorization'] = 'dhf ...

javascriptangularjsrestauthorization

Issues with Contenteditable functionality in JavaScript

My goal is to make a row editable when a button is clicked. $(":button").click(function(){ var tdvar=$(this).parent('tr').find('td'); $.each(tdvar,function(){ $(this).prop('contenteditable',true); }); }); <s ...

javascriptjqueryhtml

Converting a key-value pair string into an array in PHP: A comprehensive guide

When the checkbox is selected, I will extract the values listed below: attribute_value:samsung, attribute_id:1, spec_group_id:2, prod_id:1 To convert the above string into an array format and obtain a single array outside of the loop. Therefore, if I wa ...

phphtml

Two elements failing to display side by side

Can someone help me figure out how to align the quantity and Add-to-cart button on the same line? The quantity is displaying as a block element even though I set it as inline... any suggestions would be appreciated! Visit this link for reference. I' ...

csswordpresswoocommerce

Exploring the magic of Hover effects using CSS and JQuery

I am exploring ways to enhance the display of an element when hovering over it. I have implemented a button and my objective is for the first click to activate the hover effect, while the second click will reset it. However, I am facing an issue where the ...

javascriptjquerycss

AngularJSError

I am completely new to AngularJS and I've been tasked with debugging someone else's code. While debugging in Google Chrome, I encountered the following error: TypeError: accountService.logIn(...).success is not a function. The issue lies with ...

javascriptangularjs

Connecting an external SVG file to its corresponding HTML code

Can I connect my SVG file to my CSS file for a line animation? I'm uncertain about including the SVG code directly in my HTML file. ...

htmlcsssvg

What is the best way to use Jquery to enclose a portion of a paragraph text within a

How can I wrap the content inside a span that comes after another span, inside a paragraph and a new span? To further illustrate this, consider the following example: <p>foo <span>bar</span> baz</p> The desired outcome is: <p& ...

javascriptjqueryhtml

What determines which HTML file is loaded based on the user's browser?

I've been searching online but can't find a definite answer - is it possible to load different HTML based on the type of browser being used? In my specific case, this seems to be the only solution. After trying everything else, it looks like the ...

javascripthtmlloading

Creating form components in a row

I'm currently working on an app and I'm attempting to align 3 form elements in a ratio of 25/25/50, but it's proving to be quite challenging. At the end of this message, you'll find a picture showing the current layout. Additionally, I& ...

javascripthtmlcssvisual-studiocordova

What is causing the TouchSwipe jQuery plugin not to function in my code?

I have integrated the TouchSwipe jQuery plugin into my code to detect mouse movement and display the number of pixels moved when swiping left or right. To download the TouchSwipe jQuery plugin, I visited this link: TouchSwipe and then proceeded to use it ...

javascriptjqueryhtmljquery-plugins

XSL fails to display HTML tables

I am having trouble displaying information from an XML file about hotels using XSL on a webpage without HTML tables. Despite searching through numerous posts on StackOverflow, I cannot seem to pinpoint where I may have gone wrong. Here is an excerpt from ...

htmlxmlxslt

Difficulty aligning headings in HTML

I'm puzzled by a strange 1px gap on the left of my h2 heading, which sits atop an h3. The font sizes are set to 40px for h2 and 12px for h3. Can anyone help me solve this mystery? Any assistance would be greatly appreciated! Thank you body { pa ...

htmlcss

Guide on how to smoothly navigate through an HTML page to a specific anchor point

Is there a way to use JavaScript to make the browser scroll the page to a specific anchor? In my HTML code, I have set either a name or id attribute like this: <a name="anchorName">..</a> or <h1 id="anchorName2">..&l ...

javascriptjqueryhtmlscrollanchor