Using ng-repeat in mailto? (Send mail to multiple recipients by JSON properties)

Question

I'm currently working on forms that uses angular, PHP and mySQL to track user entries. I've converted the SQL into regular JSON in this pen http://codepen.io/StuffieStephie/full/BzmxXd/ so you can see what I'm trying to do.

When I click the Email All {{selected.field}} Volunteers button, I'd like to have a comma separated list of all emails, that match the filter.

I can get a list by using

<b ng-repeat="d in names | filter:filters">{{d.email}}{{$last ? '' : ', '}}</b>

But how do I email those people? I feel like using ng-href is wrong here. A point in the right direction would be appreciated!

EDIT: Okay, I kinda figured out how to do it by setting the mail link as the text content of the list modal. But this seems really wonky

<a ng-href="mailto:{{emails}}" target="_blank" class="waves-effect waves-light btn margin-bottom-1em"><i class="material-icons left">email</i>Email All {{selected.field}} Volunteers ({{(names | filter:filters).length}})</a>

  $scope.hasChanged = function() {
       $scope.filters = $scope.selected.field;
       $scope.emails = $( "b.theEmails" ).text();
    return $scope.emails;
  }

Also, I have to change the drop down filter to run the hasChanged() function so the value of $scope.emails will be assigned. (I tried to give it a value outside of the function but it doesn't seem to work. Any help?

Answer 1

Got it! Angular is so fancy that sometimes I forget vanilla JS exists :P This could be more efficient but it works! Behold! http://codepen.io/StuffieStephie/full/QEaGPY/

// Lil function to check if empty
function isEmpty(obj) {
  if (obj) {
    for (var prop in obj) {
      if (obj.hasOwnProperty(prop)) {
        return false;
      }
    }
  }
  return true;
}


$scope.getEmails = function(){
  var statusFilter = $scope.filters;
  var res = [];
  for (var i=0;i<$scope.names.length;i++) {
       var thisVolunteer = $scope.names[i];
       var email = thisVolunteer["email"];
     if (isEmpty(statusFilter) == false){ //If there's a filter, status must match
         if ( thisVolunteer.status == statusFilter) {
             res.push(email); 
            } //END IF Matching Status
         }//END IF filter  

    // OTHERWISE (no filter) Add/push all emails into res array
    else {res.push(email); } //END ELSE add all
    } //END FOR 
  $scope.list = res.join(", "); //Join the emails as a comma separated list
}; //END GetEmails();

Init in HTML

<a ng-init="getEmails()" ng-href="mailto:{{list}}" target="_blank">
Email All {{selected.field}} Volunteers ({{(names | filter:filters).length}})</a>

And run the function again if the select dropdown has changed

  $scope.hasChanged = function() {
    $scope.filters = $scope.selected.field;   
    $scope.getEmails();
  }

Feeling pretty proud right now :D