angularjsアプリでテキスト形式でページのスナップショットを取得します

Question

次のようなコンテンツを含む Web ページがあるとします。
<ul>
<li ng-show="showthis">{{message1}}</li>
<li ng-hide="hidethis">{{message2}}</li>
<li >{{message3}}</li>
</ul>

そして、「メッセージ」のモデルを次のように設定しました

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

次に、画面上に、の値に応じて div の内容が表示されます。 入力.これを表示 そして 入力.これを隠す

画面に表示されるテキストを変数に保存する方法はありますか。たとえば、上記の場合、変数には次のテキストが含まれます。

Item1

基本的に、ページのスナップショットをテキスト形式で取得し、それを変数に保存して、ボタン（テキストのメール）がクリックされている間にコンテンツをメールで送信したいと考えています。

上記を達成するための可能なアプローチを誰か教えてください。?

Answer 1

問題は、データ (メッセージ) を表現する方法から始まります。

• 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(',');
}