以页面的快照在angularjs应用文本格式 [英] take the snapshot of page in textual format in angularjs app

问题描述

如果我有这样内容的网页：结果
    ＆LT; UL＆GT; 结果
     ＆LT;李NG秀=showthis＆GT; {{} MESSAGE1}＆LT; /李＆GT; 结果
     ＆LT;李NG隐藏=hidethis＆GT; {{MESSAGE2}}＆LT; /李＆GT; 结果
     ＆LT;立GT; {{MESSAGE3}}＆LT; /李＆GT; 结果
    ＆LT; / UL＆GT;

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

然后在屏幕上，在div的内容将取决于值显示的 inputs.showthis 和 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. ?

推荐答案

• MESSAGE1，MESSAGE2，MESSAGE3 ：用数组更好的去..


• showthis，hidethis ：这是错误的，污染code。与模糊变量名

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 .

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

遍历所有消息，只显示可见消息

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

最后，我们可以过滤所有可见消息ANS展示自己的文字加入。

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

这篇关于以页面的快照在angularjs应用文本格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！