How to use AngularJS ng-repeat to generate a mailto hyperlink

Currently, I am displaying our user list using ng-repeat.

<div ng-repeat="User in ac.Users | filter:ac.Search | limitTo:ac.Limit"
     style="{{ac.Users.indexOf(User)%2 == 0  ? 'background-color:#f2f2f2' : 'background-color:white' }};">
  <span style="font-weight:600;">{{User.FullName}}</span>
  <span style="font-weight:600;">{{User.EmailAddress}}</span>
</div>

I am curious if there is a way to create a single mailto: hyperlink that includes all of the users' emails.

<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b2c7c1d7c083f2d7dfd3dbde9cd1dddf">[email protected]</a>,<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99eceafcebabd9fcf4f8f0f5b7faf6f4">[email protected]</a>,<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e095938592d3a0858d81898cce838f8d">[email protected]</a>.....">Group Mail</a>
htmlcssangularjsangularjs-ng-repeat

Answer №1

Within the controller:

var filteredUsers = $filter('filter')($scope.ac.Users, $scope.ac.Search);
filteredUsers.length = $scope.ac.limit;
var emailArray = filteredUsers.map(_ => _.MailAddress);
$scope.emailReference = "mailto:" + emailArray.join(",");

In the HTML:

<a href="{{emailReference}}">Group Email</a>

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

How can I create additional white space at the end of my webpage with CSS grid?

Looking for some help with CSS as a beginner here. I'm facing an issue where my CSS is creating excessive blank space at the bottom of my document, almost 60% of it. Could this be due to incorrect parent parameters or the children elements? This is m ...

htmlcsscss-grid

What is causing the native HTML5 date picker on Chrome for Android to suddenly slow down significantly?

Recently, I have encountered a frustrating issue with the date picker on my website. It used to work perfectly until a recent update on Chrome Android introduced a new date picker that is slow and unresponsive. Loading it takes several seconds, making it d ...

androidhtmlgoogle-chromemeteordatepicker

Is it possible to employ a dynamic size in media queries based on width?

Delving into the world of media queries as a novice, I stumbled upon an interesting condition while developing a Desktop application using electron. Although the CSS concept remains consistent with normal web development, a new challenge presented itself. ...

htmlcss

Spacing between Div tags

Struggling with a tricky HTML cross-browser problem. The site was built by multiple people, making it quite messy, but needs to go live as soon as possible! Each of the 4 page layouts on the site are different and handled by separate classes. However, whe ...

csscross-browserspaces

Script tag causing browser to send unwanted request

Recently, I received some code from a third-party supplier to implement on certain web pages. This code utilizes the jQuery plugin for jTemplates and looks something like this: <script type="text/html" id="item_template"> {#foreach $T.search.results ...

jqueryhtmljtemplates

How can I close the sidebar with a single tap anywhere outside of it?

Is there a way to hide the sidebar when clicking anywhere on the screen? Can I show text when hovering over an image instead of having it always visible? function openNav() { document.getElementById("mySidenav").style.width = "300px"; document.getE ...

javascripthtmlcss

creating a translucent jqm collapsible widget

Looking to make a jquery mobile collapsible element transparent. Attempted the following style, but it did not work: background-color: rgba(0, 0, 0, 0.6); Check out the Fiddle When I try this: background: #557700; filter: alpha(opacity=30); filter: pr ...

cssjquery-mobilestylesheet

Distinct styling for the start and subsequent lines of an anchor element using ::before pseudo-element

I'm currently working on a project that requires adding a decoration in front of some anchor links (A). Right now, I am using ::before to achieve this. However, there is an issue where some of the links will line-break and the second line and subseque ...

css

Discovering the Javascript Code Executing on a <span> element with the Help of Chrome Inspector or Firebug

I have encountered a situation where a website is dynamically generating information into <span></span> tags using jQuery. The span has a class of "Price" and an id corresponding to a Product Code, with the data being pulled from a JSON data sh ...

javascripthtmlfirebuginspect

mobile navigation bar not functioning properly in bootstrap

While my menu functions flawlessly on a desktop computer, I am encountering an issue on mobile devices. Whenever I click on the menu on my mobile device, it appears as though it is redirecting me somewhere, but then nothing happens. I am confused by this b ...

htmlmobilebootstrap-4menu

Tips on showcasing information with ng for in Ionic 2

https://i.sstatic.net/MKIcJ.jpgI am currently working on the thank you page for my project. When the success call is made, it will display both ORDER DETAILS and Delivery Details. However, in the event of a failure call, only the ORDER DETAILS are displaye ...

htmlangularionic2

Utilizing Ajax to dynamically update the content of a div element

As a newcomer to Ajax, I am trying to use xmlhttprequest to dynamically change the content of a div by fetching HTML from different URLs. However, my code doesn't seem to be working as expected. Can someone help me identify what I might be doing wrong ...

javascripthtmlajaxxmlhttprequestserver-side

Check out the page design for section one!

I have been attempting to create a link to a specific section on a one-page website. Sometimes it works oddly, but most of the time it gets stuck at the section I clicked on and then manual scrolling does not function properly. From what I've researc ...

javascripthtmlcssonepage-checkout

The value of Angular Input remains unchanged within a FormArray

I am experiencing an issue with the Sequence No in my PreprocessingForm's FormArray. When I add a new row, the Sequence No does not change as expected. <tr class="mat-row" *ngFor="let dynamic of PreprocessingForm.controls.arithmeticI ...

htmlangulartypescriptformarray

Adding a search feature to an app prior to its launch

We are currently working on a YouTube channel using Ionic and AngularJS. The search feature is only functional after loading videos through the API. We need to implement a condition where if the search box is empty, the videos should automatically load. ...

javascripthtmlangularjsnode.jsionic-framework

Conceal and reveal feature for multiple dynamic identifiers simultaneously

After submitting the form, I am dynamically creating buttons. <template name="workflow"> {{#each newaction}} <div class="btn-box" > {{> actioncardsubcontent}} <button type="button" class="cancelsub" >New Action</button&g ...

javascriptjqueryhtmlmeteor

Attempting to grasp the principles behind AngularJS

I've recently delved into the world of AngularJS and I'm finding myself a bit lost when it comes to understanding directives and scope. As far as I can tell, directives are used to create reusable components that include functionality and logic ...

angularjs

Design a custom scrolling navigation bar for enhanced user experience

Struggling with web design as I develop a site in ASP.NET. I have a database full of courses, each with numerous modules. The challenge is creating a navigation bar that dynamically adjusts to accommodate the varying number of modules per course without o ...

jqueryhtmlcssangularjs

Utilizing Robot Framework to select CSS attributes

The Selenium documentation provides an example of how to use Get Element Attribute: ${id}= Get Element Attribute css:h1 id However, I encountered a problem with this selector: ${VISIBILITY}= Get Element Attribute css:visibility mySidebar I ...

cssseleniumcss-selectorsrobotframework

Unable to combine two items within the same row in the cell

My current structure looks like this: <td class="sorting_1" tabindex="0"> <div class="form-check" data-user-id="1"> <label class="form-check-label"> <input class="form-check-input" type="checkbox" value=""> ...

htmlcssbootstrap-4