take the snapshot of page in textual format in angularjs app

Question

If I have a webpage with content like this:
<ul>
<li ng-show="showthis">{{message1}}</li>
<li ng-hide="hidethis">{{message2}}</li>
<li >{{message3}}</li>
</ul>

And I set the model for 'message' such that

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

Then on the screen, the contents of the div will display depending upon values of inputs.showthis and inputs.hidethis

Is there any way to store the text visible on the screen in a variable. For example for the above case I will have following text in a variable.

Item1

Basically I want to take the snapshot of the page in textual format and save it in a variable to mail the content while a button (mail the text) is clicked.

Can any one please tell me the possible approach to achieve above. ?

Answer 1

The problem starts in the way you represent your data (messages):

• message1, message2, message3 : better go with an array..
• showthis, hidethis : that's wrong, polluting the code with obscure variable names .

Store the messages within array of message objects.

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

Iterate all messages and show only visible messages

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

Finally, we can filter all visible messages ans show their text joined.

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