Javascript 如何将包含输入字段的HTML转换为标签？

我有一个HTML文件，包含文本、收音机、复选框和选择等输入字段

如果用户将此内容传递给函数，则应返回包含标签的HTML，替换在其各自输入字段中输入值的输入字段

我希望这可以用AngularJS或javascript或者两者的组合来完成

HTML内容示例：

<table>
    <tr>
        <td>Temp:</td>
        <td>
            <input ng-model="bbb" />
        </td>
        <td>{{bbb}}</td>
    </tr>
</table>
<div>
    <input type="checkbox" ng-model="aaa" />Delivered</div>


function convertTheHtml (HTMLContent) { /* Some functionality will do the conversion and return x like below

<table>
    <tr>
        <td>Temp:</td>
        <td>{{nn.vs.temp}}</td>

    </tr>
</table>
<div>Delivered</div>
<!--It will be displayed only if it is checked-->

*/ $scope.output=x; }

---

要真正理解您的问题并不容易，但我认为您正在尝试使用复选框按钮更改html内容，对吗？如果是这样，您可以使用ng change将函数绑定到复选框，使用此方法，您可以编写一个函数，当cehckbox更改时，html内容也会随之更改。

关于堆栈溢出的投票最多的问题有很多值得学习的地方： 最适用于您的问题的答案是：

在jQuery中，选择器用于查找DOM元素，然后将事件处理程序绑定/注册到它们。当事件触发时，该命令代码将执行以更新/更改DOM

在AngularJS中，您需要考虑视图而不是DOM元素。。。视图通过作用域绑定到模型。视图是模型的投影。事件会更改模型，即数据、范围属性和投影这些模型的视图会自动更新

在AngularJS中，考虑模型，而不是保存数据的jQuery选定DOM元素。将视图视为这些模型的投影，而不是注册回调来操纵用户看到的内容

我将以一种角度提供一些具有相同效果的替代方法，而不是编写一个用标签替换html输入的函数

一,。使用ng if切换输入和标签：

<table>
  <tr>
    <td>Temp:</td>
    <td ng-if="!aaa">
      <input ng-model="bbb" />
    </td>
    <td ng-if="!aaa">{{bbb}}</td>
    <td ng-if="aaa">{{nn.vs.temp}}</td>
  </tr>
</table>

三,。使用指令有条件地构造元素：

app.directive('updateToggle', function() {
  return {
    restrict: 'A',
    replace: true,
    scope: {
      editvalue: '=',
      readvalue: '=',
      delivered: '='
    },
    template: '<td>\
      <span ng-show="!delivered">\
        <input ng-model="editvalue"> {{editvalue}}\
      </span>\
      <span ng-show="delivered">\
        {{readvalue}}\
      </span>\
      </td>'
  }
});
...
<td>Temp:</td>
<td update-toggle delivered="status.aaa" readvalue="nn.vs.temp" editvalue="data.bbb"></td>

我想您会发现，像这样的策略比试图在函数中解析和重构html片段更灵活。如果输入是文本区域、单选按钮列表、可编辑div、具有多个选项的下拉列表，甚至是自定义指令，该怎么办？用角度的方法，这些都同样容易切换到其他的东西

---

这里有一个：

据我所知，您想要提交一个表单并返回一个视图，与文本非常匹配。如果我是对的。直接处理html是可融合的，但序列化-反序列化数据更为实用，而且有很多原因

您应该了解的第一件事是表单表示的是一组数据，这些数据可以表示为json或Javascript对象。实际通过的是那个物体。将表单中的数据处理为任何类型的机器可读数据可以称为表单序列化。反序列化的另一种方法

要在角度上实现这一点，您至少需要一个控制器和一个或两个视图。控制器将保存序列化数据、处理序列化数据的视图或指令，并为您提供更人性化的表示、案例中的数据输入表单以及呈现该数据的视图。我不打算讨论指令，因为它比您所寻找的更高级

控制器 窗体视图

---

也许有更简洁的方法可以做到这一点，但这一种似乎正是你所要求的。一天结束时最重要的是你的序列化数据。您应该始终传输序列化数据，并将这些数据反序列化为视图、表单等。

为了“帮助”，而不是“为您做一切”，我们需要看到您自己的尝试。到目前为止，出现了什么问题？所以，您需要一个函数来将一个DOM片段转换为另一个DOM片段？一个类似的问题，但对于jQuery：@Rumplin我不想使用jQuery。我的情况是这样的，这可以通过AngularJS和javascript@yarix是的，绝对是

app.directive('updateToggle', function() {
  return {
    restrict: 'A',
    replace: true,
    scope: {
      editvalue: '=',
      readvalue: '=',
      delivered: '='
    },
    template: '<td>\
      <span ng-show="!delivered">\
        <input ng-model="editvalue"> {{editvalue}}\
      </span>\
      <span ng-show="delivered">\
        {{readvalue}}\
      </span>\
      </td>'
  }
});
...
<td>Temp:</td>
<td update-toggle delivered="status.aaa" readvalue="nn.vs.temp" editvalue="data.bbb"></td>

angular.module('angularApp', []);     

 angular.module('angularApp')
  .controller('formController' , function($scope) {

  $scope.form = {};

  $scope.parameters = {
    editable:true
  }

});

<div ng-app="angularApp">
  <div ng-controller="formController">
    <form ng-show="parameters.editable">
        <input ng-model="form.field_a" />
        <input ng-model="form.field_b" />
        <input ng-model="form.field_c" />
        <div>
            <input type="radio" ng-model="form.radio_a" value="a" />
            <input type="radio" ng-model="form.radio_a" value="b" />
            <input type="radio" ng-model="form.radio_a" value="c" />
        </div>
    </form>
    <table ng-hide="parameters.editable">
        <tr ng-repeat="field in form">
            <td>{{field}}</td>
        </tr>
    </table>
    <input type="checkbox" ng-model="parameters.editable" />
  </div>
</div>