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是最好的。

基于angularjs中的数组数据动态创建表单？

1 个答案: