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 hide the <dd> elements within a <dl> using knockout's custom data binding upon initialization?

I have implemented a <dl> where the <dd> can be expanded/collapsed by clicking on the corresponding <dt> using knockout's data binding. The inspiration for my solution came from a tutorial on creating custom bindings. Currently, I h ...

javascriptjquerycssknockout.jscustom-binding

What sets apart the process of installing AngularJS and AngularJS Core using NuGet?

I am curious about the difference between these two packages in my packages.config file. Would it be advisable to uninstall one of them? <?xml version="1.0" encoding="utf-8"?> <packages> <package id="angularjs" version="1.3.15" targetFr ...

javascriptangularjs

Display the changing value at the beginning of the drop-down menu

I'm currently working on an AngularJS forEach loop where I need to display a dropdown list with dynamic values. The goal is to have the value stored in $scope.showCurrentProgram as the first selected element in the dropdown list when the page loads, a ...

javascripthtmlangularjs

Angular Modal UI fails to update variable changes

I'm encountering an issue with my Angular Modal UI in this Plunk. Despite having a watched variable, the watch function fails to trigger when the variable is changed. Can you help spot the error? Javascript var app = angular.module('app', ...

angularjsangular-ui-bootstrapangular-ui

Tips for handling a JSON payload retrieved through a POST request

I'm currently working on a button that triggers a POST call to retrieve a json response from the server. My goal is to display this json response in a new (chrome) browser tab. Here's what I have so far using Angular: $http.post(url, data) .t ...

javascriptangularjsjsongoogle-chromegoogle-chrome-extension

The inclusion of the content-type in the request header is essential when transmitting JSON data from AngularJS to a

My current project in Angular is hosted on a server, and I am attempting to make calls to a REST API that is running on another server. To enable CORS, I have set the response headers in the filter of the REST API as: response.setHeader("Access-Control-Al ...

angularjsrestangularrequest-headers

Arranging XML information in PHP from most recent to oldest

I have a working code that I want to modify so that the Observed Data is displayed from the newest date to the oldest. How can I flip only the Observed Data? Here is my current code: <?php $url = "http://r7j8v4x4.map2.ssl.hwcdn.net/NOD_R.xml"; $xml = ...

phphtmlxmlxml-parsing

The functionality of react-waypoint's onEnter/onLeave event handlers seems to be malfunctioning

Recently, I experimented with react-waypoint to control the visibility of a div. The code works as intended by hiding the div when it reaches the waypoint inside onEnter. When the div is inside, the isInView state becomes true, which in turn triggers the d ...

javascripthtmlnode.jsreactjs

Can you help me understand how to ensure the CSS translate feature lands in a specific div, no matter its initial position?

I'm facing a roadblock in my journey to create a card game. The issue arises at the final stage of the Translate function implementation. In this game, the player is dealt 30 cards (I've simplified it to four for ease of programming), and upon cl ...

javascriptcss

What is the process for customizing the image size of a WordPress RSS feed in pixels?

Is there a way to customize image sizes beyond the 'thumbnail', 'medium', and 'large' options? I tried setting width and height in the <img> tag within an RSS file, but it didn't work. Could it be a nested quotation ...

csswordpressimagersssize

The presence of '<!DOCTYPE html>' causes my website's content to compress

After including !DOCTYPE html, I noticed that the first section of my website is shrinking even though its height is set at 120%. I attempted various solutions from stack overflow like setting the height of HTML and body to 100%, but none of them resolved ...

htmlcssdomdoctype

Tips for resolving a flickering issue that occurs when switching to an input field with our default value / placeholder plugin

In the realm of web development, numerous plugins cater to the implementation of HTML5's placeholder attribute in older browsers. The plugin we have opted for can be found here. Unlike some other alternatives, this particular plugin, with a few modif ...

javascriptjqueryhtmlplaceholder

Develop a CSS layout for the specified design

Aiming to achieve a unique layout using dynamic html strings. The challenge arises when transitioning to the second page as the layout does not adjust upward and images cannot be added to the first page. Attempting to implement the following sample code ...

htmliosswiftcss

Inconsistency in field generation in WordPress Contact Form 7 causing issues

After utilizing the WordPress plugin Contact Form 7 to put together a straightforward questionnaire, I discovered that two fields, Your Birthday and Your Email, were mistakenly generated on top of one another in the final output. You can take a look at th ...

htmlcsswordpressforms

Utilizing Angular Controllers to Access HTML Elements without the Need for jQuery

Within my Controller, I am trying to access an html element that is generated automatically by an external library on the DOM. Unfortunately, importing a directive inside the html is not an option in this case. So, my question is: Is there a way to retrie ...

angularjs

Utilizing AJAX and PHP for dynamic changes based on listbox selection

Is there a way to make the query run whenever a selection is made from the listbox? if(isset($_POST['select'])){ $newselection=$_POST['select']; $query = "SELECT count(*) FROM listings where description=" . $newselection. ""; $r ...

phphtmlajaxforms

Aligning floating elements in the center

Presently, I am working with the following code... <!DOCTYPE html> <html> <head> <title>Test</title> <meta charset="UTF-8" /> <link href="verna.css" type="text/css" rel="stylesheet" /> </head> ...

csshtmlcss-float

Using jQuery to create a nested table

I have a table that I would like to customize so that when a user clicks on a row, only the child table under that specific row is visible while the child tables under other rows are hidden. How can I achieve this using jQuery? <table class="mainTabl ...

jqueryhtmlhtml-table

Is it possible to utilize :not in this scenario?

<ul class="promocode"> <li>one</li> <li>two</li> <li class="three">three</li> </ul> Is there a way to use :not in order to apply a hover effect to the entire list, except when hovering ov ...

css

Implementing NgModelController in a directive controller: A comprehensive guide

Is it possible to pass NgModelController to a directive controller? This is necessary in order to be able assign values to the model in the controller. The following example demonstrates this concept: angular .module('directives.selectBox&ap ...

angularjsangularjs-directiveangularjs-scope