3

我正在尝试简化使用 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 上这么多个小时之后，我没看到。:-)

谢谢！

4

4 回答 4

3

您可以使用 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。

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

于 2013-04-05T23:00:49.033 回答
0

I created a simple form builder application, source code: https://github.com/Selmanh/angularjs-form-builder

You can see it online here: http://selmanh.github.io/angularjs-form-builder/

My solution was similar to yours, but didn't use watch.

于 2013-08-16T17:20:49.333 回答
0

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

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

于 2014-05-26T17:45:40.610 回答
0

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

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

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

于 2013-05-29T21:42:47.230 回答