Question

我正在尝试简化我使用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对象：一个表示在表单中编辑的数据，另一个表示表单定义（字段类型，字段选项......）。

请参阅此JSFIDDLE以获取代码：http://jsfiddle.net/vincedo/9Uf6C/

在我的头撞墙几次后，我想我已经开始工作了。主要的困难是让Angular处理字符串 - 我从表单定义对象（例如"entity.name"） - 作为具有双向数据的范围属性结合

我还有两个问题：

这是正确的方法吗？更具体地说，我的代码每个字段使用两个scope.$watch，我担心它可能会影响性能。
在我的表格中，为什么在“语言”字段中没有选择“英语”？它必定是一个愚蠢的错误：HTML源使用0,1,2 ...作为<option>值，而我的代码使用字符串键，如en，fr ......但是之后试图把我的头包裹在$ wrap和$ parse这么多个小时之后，我没有看到它。： - ）

谢谢！

Answer 1

您可以使用ng-switch标记（http://docs.angularjs.org/api/ng.directive:ngSwitch）执行此操作。这样的事情。

<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>

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

http://jsfiddle.net/Galdo/Sqsc7/17/

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

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

Answer 2

对于你的第二个问题（为什么0,1,2，...而不是'en'，'fr'等），你需要使用一个对象而不是一个数组来绑定{ {1}}元素。我找到了答案in another question，但简而言之，您的模型变为<select>，模板的ng-options变为{ 'en': 'English', 'fr': 'French', 'und':'Undefined'}

我在这里更新了您的小提琴：http://jsfiddle.net/StevenLJackson1/9Uf6C/7/

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

Answer 3

我创建了一个简单的表单构建器应用程序，源代码：https://github.com/Selmanh/angularjs-form-builder

您可以在此处在线查看：http://selmanh.github.io/angularjs-form-builder/

我的解决方案与您的相似，但没有使用手表。

Answer 4

你也可以考虑一下这个，它基于简单的json定义创建动态角形式：

https://github.com/danhunsaker/angular-dynamic-forms

角度（半）动态形式生成

4 个答案: