如何使用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目前处理得很少的少数项目之一.