Is there a way to access the contents of ng-repeat using getElementById?

Question

Is there a way to access the contents of ng-repeat using getElementById?

Is there a way to extract the data from ng-repeat?

<div ng-repeat="w in quick.wint">
   <div id="wname"><strong>{{w.Name}}</strong></div>
   <div id="wcount">{{w.Count}} Open Queues</div>
</div>

I am looking to store this information in a variable for printing purposes.

var wname = document.getElementById('wname').innerHTML;
var wcount = document.getElementById('wcount').innerHTML;
var popupWin =window.open('','_blank','width=300,height=300');
popupWin.document.open();
popupWin.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onload="window.print()"><h1>Documentation</h1>' + wname + '</body></html>');
popupWin.document.close();

I would like to format the display on the printed document differently than how it appears in the browser. For instance, instead of:

<wname>
<wcount>

I want it to be shown as:

<wname> : <wcount>

Thank you in advance!

javascript angularjs

Answer 1

Answer №1

If you wish to differentiate each id, you can append the index as shown in the example below:

<div ng-repeat="w in quick.wint; let i = index">
   <div id="wname-{{i}}"><strong>{{w.Name}}</strong></div>
   <div id="wcount-{{i}}">{{w.Count}} Open Queues</div>
</div>

When accessing a specific row, simply concatenate the id like this:

var wname = document.getElementById('wname-1').innerHTML;
var wcount = document.getElementById('wcount-1').innerHTML;

Alternatively, if you need to retrieve all contents, consider using classes and querySelectorAll to obtain an array of children elements:

<div ng-repeat="w in quick.wint">
   <div class="wname"><strong>{{w.Name}}</strong></div>
   <div class="wcount">{{w.Count}} Open Queues</div>
</div>

const wnames = document.querySelectorAll(".wname")
const wcounts = document.querySelectorAll(".wcount")

Visit this link to learn more about querySelectorAll method.

Answer 2

If you wish to differentiate each id, you can append the index as shown in the example below:

<div ng-repeat="w in quick.wint; let i = index">
   <div id="wname-{{i}}"><strong>{{w.Name}}</strong></div>
   <div id="wcount-{{i}}">{{w.Count}} Open Queues</div>
</div>

When accessing a specific row, simply concatenate the id like this:

var wname = document.getElementById('wname-1').innerHTML;
var wcount = document.getElementById('wcount-1').innerHTML;

Alternatively, if you need to retrieve all contents, consider using classes and querySelectorAll to obtain an array of children elements:

<div ng-repeat="w in quick.wint">
   <div class="wname"><strong>{{w.Name}}</strong></div>
   <div class="wcount">{{w.Count}} Open Queues</div>
</div>

const wnames = document.querySelectorAll(".wname")
const wcounts = document.querySelectorAll(".wcount")

Visit this link to learn more about querySelectorAll method.

Is there a way to access the contents of ng-repeat using getElementById?

Answer №1

Similar questions

Update ng-Bootstrap ToDate field by removing the date when selecting a fromDate

Generate a JavaScript variable in real-time and leverage it to retrieve the corresponding JSON response

Triggering Jquery event multiple times

What is the standard character-encoding for HTTP header values when using AJAX?

How can I find the week of the month using Moment.js? (similar to Google Calendar)

Guide to converting a log string into JSON using Javascript

Tips for adding elements to an angular $scope.array?

Form validation on the client side is not occurring, and the form elements cannot be edited

Is there a way to automatically refresh a page as soon as it is accessed?

Using JavaScript to validate birth date selection along with three drop down menus in ASP.Net

When I reload the page in Rails with AngularJS, the rendered content from AngularJS disappears

What is the best way to keep classes added through jQuery even after retrieving all the data from the API?

When working with AngularJS' ng-repeat in IE8, JQuery may encounter difficulties reading the innerHTML of a table row

What could be causing the lack of value appearing after I clicked the button?

What is the best method for transforming a stream into a file with AngularJS?

Exploring the attrTween function in Angular with D3 insights

Iterating through data to showcase vertical columns for a specific time span of 3 years, highlighting only the months with available data

Sending dynamic values to Cordova in an Onsen AngularJS application for the Share button

When utilizing the React API Fetch, there may be instances where not all data is returned. However

To open a popup menu with a text box, simply click on the text box