控制器

Question

我有一个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; }

Answer 1

关于堆栈溢出的最高投票角度问题还有很多东西需要学习： "Thinking in AngularJS" if I have a jQuery background?最适用于您问题的quote来自Mark Rajcok's回答：

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

在AngularJS中，您想要考虑视图而不是DOM元素......视图与模型相关联（通过范围）。视图是模型的投影。事件更改模型（即数据，范围属性）以及自动更新项目模型的视图。＆＃34;

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

与其编写一个用标签替换html输入的函数，我将以有角度的方式提供一些具有相同效果的替代方案。

1。使用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>

2。使用ng-include显示不同的模板：

<div ng-if="aaa" ng-include="'readonly.html'"></div>
<div ng-if="!aaa" ng-include="'update.html'"></div>

3. 使用指令有条件地构造元素：

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片段更灵活。如果输入是textarea，单选按钮列表，可编辑div，带有多个选项的下拉列表，甚至是自定义指令，该怎么办？通过角度方法，这些都可以轻松切换出其他东西。

以下是demo：http://plnkr.co/edit/BHukpPrcauZn9OI9DMRs?p=preview

Answer 2

要理解你的问题并不容易，但我认为你试图通过复选框按钮改变html内容，是不是？如果它是这样你可以使用ng-change（）将函数绑定到你的复选框，使用这种方法你可以编写一个函数，当cehckbox改变html内容的变化时。

Answer 3

根据我的理解，您想要提交表单并获取视图，非常匹配相同的文本。如果我是对的。直接处理你的html是可熔的，但序列化 - 反序列化你的数据更实际，并且有很多正当理由。

你应该理解的第一件事是表单代表的是一组数据，数据可以表示为json或Javascript对象。 Angular实际上传递的是那个对象。从表格到任何种类的机器可读数据的数据处理可以称为表格的序列化。反序列化的另一种方式。

要在Angular中实现此目的，您至少需要一个控制器和一个视图或两个视图。您的控制器将保存您的序列化数据，您的视图或指令将处理该序列化数据并为您提供更友好的表示形式，您的案例中的数据输入表单以及呈现该数据的视图。我不打算涵盖指令，因为它比你想要的更先进。

控制器

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>

<强> Demo here

甚至可能有更简洁的方法，但这个似乎正在做你要求的。最重要的是您的序列化数据。您应始终传输序列化数据并将该数据反序列化为视图，表单等等。

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

3 个答案:

控制器

表单视图