javascript - 基于AngularJS中的数组数据动态创建表单？

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 4 年前。

Improve this question

我根据其余 API 数据构建了一个数组，如下所示

arr = [ {'model1': 'value1', 'type': 'text'},
        {'model2': 'true', 'type': 'radio'},
        {'model3': 'value3', 'type': 'text'},
      ];

这里我如何生成动态表单，例如第一个元素 ng-model名称为model1及其 value如value1其类型为text/radio

Answer 1

首先修复数组项属性的名称，以便它们的名称中不包含索引，因为这违背了目的。将数组更改为

arr = [
  {'model': 'value1', 'type': 'text'},
  {'model': 'true', 'type': 'radio'},
  {'model': 'value3', 'type': 'text'},
];

您需要迭代数组才能生成这样的表单

<form form="arrForm" ng-submit="arrForm.submit()">
  <section ng-repeat="value in arr>
    <label for="value-{{$index}}-model">Model {{$index}}</label>
    <input ng-model="value.model" name="value-{{$index}}-model">

    <section>
      <label for="value-{{$index}}-type">Type {{$index}} </label>
      <input ng-repeat="type in possibleTypes" type="radio" ng-model="value.type" ng-value="type" name="value-{{$index}}-type">
    </section>
  </section>

  <input type="submit" value="Save All" ng-disabled="arrForm.$invalid">
</form>

但是，请考虑使用 AngularJS 表单库。 FormlyJS按英里计算是最好的。