将字符串转换为HTML输入并使用绑定值创建字符串

Question

我想生成一个带有HTML输入值的字符串（由用户输入）。

我的HTML代码用于显示带有HTML输入的字符串。

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

用于转换带HTML输入的字符串的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();

这将显示如下输出。

现在，如果我们在输入中输入数据，那么它将显示如下，但问题是当我们在一个文本框中输入值时，它还将填充另一个文本框.

如果我们点击保存按钮插入所有值后，我想制作如下所示的字符串。

嗨，板球比赛与Aus在2017年12月20日裁判是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;

然后，您可以将匹配值链接到控制器范围，并将模型与输入类型分开，或者只是将它们完全删除。