Angularjs 角度（半）动态形状生成

我试图简化如何使用AngularJS生成表单

我的最终目标是能够写出以下内容：

<form>
  <field-div label="Name">
    <field which="form.name"></field>
  </field-div>

  <field-div label="Language">
    <field which="form.language"></field>
  </field-div>
</form>

为此，我使用了两个指令（

fieldDiv

和

field

）和两个JavaScript对象：一个表示表单中正在编辑的数据，另一个表示表单定义（字段类型、字段选项…）

有关代码，请参阅此JSFIDLE：

在我的头撞了几次墙之后，我想我已经成功了。主要的困难是获取角度，以将从表单定义对象（例如

“entity.name”

）获得的字符串视为具有双向数据绑定的作用域属性

我还有两个问题：

• 这样做对吗？更具体地说，我的代码每个字段使用两个

  范围。$watch

  ，我担心这可能会影响性能
• 在我的表格中，为什么在“语言”字段中不选择“英语”？这一定是一个愚蠢的错误：HTML源代码使用0、1、2。。。as
  值，而我的代码使用字符串键，如

  en

  ，

  fr

  。。。但是，在我花了这么多时间试图对$wrap和$parse进行分析之后，我没有看到它。：-）

---

谢谢

您可以使用ng开关标签（）完成此操作。像这样的

<div class="control-group" ng-repeat="element in form">
  <label class="control-label">{{element.label}}</label>
  <div class="controls" ng-switch="element.widget">
    <input ng-switch-when="text" type="text" ng-model="entity[element.model]" ng-required="element.required" />
    <select ng-switch-when="select" ng-model="entity[element.model]" ng-required="element.required" ng-options="o.key as o.name for o in element.options"></select>
  </div>
</div>

{{element.label}

以下是我的解决方案的一个工作示例：

请注意，我在您的架构中将entity.name更改为name

使用此解决方案，您将避免使用任何指令。纯粹的棱角

对于第二个问题（为什么0、1、2……而不是“en”、“fr”等），您需要使用对象而不是数组来绑定到

元素。我找到了答案，但简而言之，您的模型变成了

{'en'：'English'，'fr'：'French'，'und'：'Undefined'}

，模板的ng选项变成

ng options=“k as v for（k，v）in options”

我在这里更新了你的小提琴：

---

我还对多个手表的性能感兴趣（即，您第一个问题的答案），因为我在当前项目中也做了类似的事情。

我创建了一个简单的表单生成器应用程序，源代码：

您可以在此处在线查看：

---

我的解决方案与你的类似，但是没有使用WISH。

< P>你也可以考虑看这个，它基于简单的JSON定义创建动态角度形式：

---

您需要正确更新您的小提琴，您的链接将打开一个空的角度小提琴模板。@supermasher:谢谢您指出这一点！！这是我的第一个JSFIDLE，我认为它们会自动更新。它现在应该可以工作了。我有一个我认为更好的解决方案，但我现在无法使它工作，因为您的模型引用包含“实体”。您能否编辑此表单定义以仅返回（例如“名称”？@Galdo:对不起，我不明白您的意思。您希望我编辑

$scope.form

对象，以便只保留“name”键？在您的模型中，您有一个来自其他地方的表单定义。您可以编辑此模式，还是必须适应它？对于我的解决方案，行模型：“entity.name”必须更改为模型：“name”，Galdo，谢谢您花时间。很高兴您使用

ngRepeat

对字段进行迭代；在我的情况下，这不起作用，因为我需要对表单布局进行严格控制（例如，同一

中的两个字段，能够手动将一些属性从模板传递到给定字段）。。。至于

ngSwitch

指令，我知道它，但决定反对它，因为它感觉像是“模板中的逻辑”。此外，我还需要一些JS代码来实现表单行为（例如，动态添加/删除字段），因此我不能没有指令或控制器。值得注意的是您使用的

entity[key]

技巧。使用

$watch（）

手动实现双向数据绑定本来可以避免我。再次感谢你的帮助！正确地说，仅仅共享链接不是答案。你也必须解释它们。。