2016-07-13 11 views
0

Ich arbeite gerade an Formularen, die angular, PHP und mySQL verwenden, um Benutzereinträge zu verfolgen. Ich habe die SQL in reguläre JSON in diesem Stift konvertiert http://codepen.io/StuffieStephie/full/BzmxXd/, damit Sie sehen können, was ich versuche zu tun.Verwenden von ng-repeat in mailto? (E-Mail an mehrere Empfänger über JSON-Eigenschaften senden)

Wenn ich auf die Schaltfläche Email All {{selected.field}} Volunteers klicke, möchte ich eine durch Kommas getrennte Liste aller E-Mails haben, die dem Filter entsprechen.

Ich kann eine Liste erhalten, indem

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

Aber wie eine E-Mail ich diese Leute? Ich fühle mich wie ng-href ist hier falsch. Ein Punkt in die richtige Richtung wäre wünschenswert!

EDIT: Okay, ich habe irgendwie herausgefunden, wie es geht, indem Sie den Mail-Link als Textinhalt der Liste modal setzen. Aber das scheint wirklich wackelig

<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; 
    } 

Auch ich habe die Drop-down-Filter zu ändern, um die hasChanged() Funktion so dass der Wert von $scope.emails zugewiesen wird ausgeführt. (Ich habe versucht, einen Wert außerhalb der Funktion zu geben, aber es scheint nicht zu funktionieren. Irgendwelche Hilfe?

+0

Als Option können Sie 'ng-click =" sendMail() "' anstelle von ng-href hinzufügen, Mail in dieser Funktion vorbereiten und window.open mit "mailto : " – shagrin

Antwort

1

Got it! Angular ist so ausgefallen, dass ich manchmal vergessen Vanille JS existiert: P Dies könnte effizienter sein, aber es funktioniert! Siehe, 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> 

Und wieder die Funktion ausgeführt werden, wenn die Select-Dropdown geändert hat

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

Jetzt ziemlich stolz fühlen: D