angularjs - Angular (半)动态表单生成

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" )——作为具有双向数据绑定(bind)的作用域属性.

我还有两个问题:

• 这是正确的做法吗？更具体地说，我的代码使用两个 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更改为您架构中的名称。

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