Machen Sie den Schnappschuss der Seite im Textformat in der AngularJS-App

Question

Wenn ich eine Webseite mit Inhalten wie diesem habe:
<ul>
<li ng-show="showthis">{{message1}}</li>
<li ng-hide="hidethis">{{message2}}</li>
<li >{{message3}}</li>
</ul>

Und ich habe das Modell für „Nachricht“ so eingestellt

$scope.message1, $scope.message2 and $scope.message3 are the text entered by user from inputbox.
$scope.showthis = 0
$scope.hidethis = 1

Dann wird auf dem Bildschirm der Inhalt des Div abhängig von den Werten von angezeigt inputs.showthis Und inputs.hidethis

Gibt es eine Möglichkeit, den auf dem Bildschirm sichtbaren Text in einer Variablen zu speichern?Für den obigen Fall habe ich beispielsweise den folgenden Text in einer Variablen.

Item1

Grundsätzlich möchte ich den Schnappschuss der Seite im Textformat erstellen und ihn in einer Variablen speichern, um den Inhalt per E-Mail zu versenden, während auf eine Schaltfläche (Text per E-Mail senden) geklickt wird.

Kann mir bitte jemand den möglichen Ansatz nennen, den ich oben erreichen kann??

Answer 1

Das Problem beginnt in der Art und Weise, wie Sie Ihre Daten (Nachrichten) darstellen:

• message1, message2, message3 :Gehen Sie besser mit einem Array.
• showthis, hidethis :Das ist falsch, den Code mit obskuren Variablennamen zu verunreinigen.

Speichern Sie die Nachrichten in einem Array von Nachrichtenobjekten.

$scope.messages = [
  {text: 'Item1' , visible: false},
  {text: 'Item2' , visible: false},
  {text: 'Item3' , visible: true}
]

Alle Nachrichten durchlaufen und nur sichtbare Nachrichten anzeigen

<ul>
   <li ng-repeat="message in messages" ng-show="message.visible">
      <input type="text" ng-model="message.text">
    </li>
</ul>

Schließlich können wir alle sichtbaren Nachrichten filtern und ihren verknüpften Text anzeigen.

$scope.getVisible = function(){
  return $scope.messages.filter(function(msg){
    return msg.visible;
  }).map(function(msg){
    return msg.text;
  }).join(',');
}