在angularjs app中以文本格式拍摄页面的快照

时间:2014-01-09 16:56:35

标签: jquery angularjs angular-ui

如果我的网页内容如下:
    <ul>
     <li ng-show="showthis">{{message1}}</li>
     <li ng-hide="hidethis">{{message2}}</li>
     <li >{{message3}}</li>
    </ul>

我为&#39;消息&#39;设置了模型。这样

$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

的值显示

有没有办法将文本中显示的文本存储在变量中。例如,对于上述情况,我将在变量中包含以下文本。

Item1

基本上我想以文本格式拍摄页面的快照,并将其保存在变量中,以便在点击按钮(邮件文本)时邮寄内容。

任何人都可以告诉我实现上述目标的可行方法。 ?

1 个答案:

答案 0 :(得分:2)

问题从您表示数据(消息)的方式开始:

  • message1, message2, message3:最好使用数组..
  • showthis, hidethis:这是错误的,用晦涩的变量名来污染代码。

将消息存储在消息对象数组中。

$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>

最后,我们可以过滤所有可见的消息并显示其文本已加入。

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