如何使用Angular输出动态表单字段？

Question

我想基于动态字段配置来呈现表单：

$scope.fields = [
    { title: 'Label 1', type: 'text', value: 'value1'},
    { title: 'Label 2', type: 'textarea', value: 'value2'}
];

这应该输出的行为类似于：

<div>
    <label>{{field.title}}<br />
        <input type="text" ng-model="field.value"/>
    </label>
</div>
<div>
    <label>{{field.title}}<br />
        <textarea ng-model="field.value" rows="5" cols="50"></textarea>
    </label>
</div>

简单的实现方法是使用if语句为每种字段类型呈现模板。但是，由于Angular不支持if语句，因此导致了指令的发展方向。我的问题是了解数据绑定的工作方式。指令的文档有点稠密和理论性。

我在这里尝试了一个简单的示例：http :
//jsfiddle.net/gunnarlium/aj8G3/4/

问题在于表单字段未绑定到模型，因此submit（）中的$ scope.fields不会更新。我怀疑我的指令功能的内容是完全错误的… :)

展望未来，我还需要支持其他字段类型，例如单选按钮，复选框，选择等。

Answer 1

无论要尝试创建的指令如何，您遇到的第一个问题是在具有表单元素的表单中使用ng-repeat。ng-repeat如何创建新范围可能很棘手。

该指令创建新的作用域。

我也建议不要在部分模板中使用ngSwitch而不是使用element.html
。

<div class="form-row" data-ng-switch on="field.type">
    <div data-ng-switch-when="text">
        {{ field.title }}: <input type="text" data-ng-model="field.value" />
    </div>
    <div data-ng-switch-when="textarea">
        {{ field.title }}: <textarea data-ng-model="field.value"></textarea>
    </div>
</div>

由于ng-
repeat，这仍然给您带来在子范围内修改表单元素的问题，为此，我建议在项目更改后，对每个元素使用ngChange方法来设置值。这是我目前认为AngularJS无法很好处理的少数项目之一。