文字列をHTML入力に変換し、バインドされた値を持つ文字列を作成します。

Question

HTML入力値（ユーザーが入力した値）の文字列を生成したいとします。

HTML入力を含む文字列を表示するためのHTMLコードです。

<div id="wid-12" ng-bind-html="finalString" compile-template></div> 

JavaScript入力用のJavaScriptコード。

 function convertStringToInputs() { 
      var string = "Hi,Cricket match with !!!TEXT!!! on !!!DATE!!! Umpire is !!!TEXT!!! and price is !!!NUMBER!!! items."; 
      var mapObj = { 
       '!!!TEXT!!!': "<input type='text' placeholder='Enter text' ng-model='text'/>", 
       '!!!DATE!!!': '<input type="date" placeholder="Enter date" ng-model="date"/>', 
       '!!!NUMBER!!!': '<input type="number" placeholder="Enter Number" ng-model="number"/>' 
      }; 
      string = string.replace(/!!!TEXT!!!|!!!DATE!!!|!!!NUMBER!!!/gi, function (matched,key) { 
       return mapObj[matched]; 
      }); 
      $scope.finalString = $sce.trustAsHtml(string); 
     } 
     convertStringToInputs(); 

これは、次のような出力を表示します。我々は、入力中のデータを入力した場合

は今、それは以下のように表示されますが、問題は、我々は1つのテキストボックスに値を入力すると、それはまた別のテキストボックスを記入しますです。

保存ボタンをクリックするとすべての値を挿入した後、以下のような文字列を作成します。

こんにちは、2014年12月20日にAusとCricketがマッチしています。アンパイアはAusで、価格は 120000です。

のJavaScriptコードのための保存ボタン

 function saveClick() { 
      var a = $sce.getTrustedHtml($scope.finalString); 
     } 

最後に、私は私が他のテキストボックスに値を入力した場合、それはテキストボックスに同じ値を複製

1. に直面してどのような問題がリストされています。

2. すべての入力値を入力した後に文字列を生成することはできません（私は上側を記載しています）。

Answer 1

コメントに投稿するには長すぎます。テンプレートリテラルを使用できるかどうかは、コード内の変数の値を文字列に取り入れることができるので、私が知りたいことです。手動の文字列置換いじりこれ以上：

var match = { 
    "match_date" : "2018-01-01T16:30:00.000Z", 
    "match_opponent" : "John Doe", 
    "match_price" : "$13", 
    "match_umpire" : "JaneDoe" 
}; 

var template = `Hi,Cricket match with <input type='text' placeholder='Enter text' value="${match.match_opponent}" ng-model='text'/> on <input type="date" placeholder="Enter date" value="${match.match_date}" ng-model="date"/>Umpire is <input type='text' placeholder='Enter text' value="${match.match_umpire}" ng-model='text'/> and price is <input type="number" placeholder="Enter Number" value="${match.match_price}" ng-model="number"/> items.` 

return template; 

その後、あなたは自分のコントローラのスコープに一致値をリンクしていないし、入力タイプからモデルを区切るか、単にそれらを完全に削除することができます。