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>

为此,我使用了两个指令 (fieldDivfield) 和两个 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 回答