如何使用 angularjs 动态创建表单

How to dynamically create a form using angularjs

本文关键字：创建 表单 动态 angularjs 何使用      更新时间：2023-09-26

我正在尝试弄清楚如何根据从服务器返回的字段数组动态创建表单。

像这样的东西

[{
  id: "title",
  type: "text", /* Map to Input type=text */
  regex: "/^[a-zA-Z]+/"
},{
  id: "summary",
  type: "memo", /* Map to Textarea */
  regex: "/^[a-zA-Z]+/"
},{
  id: "priority",
  type: "list", /* Map to Select */
  options: [1,2,3,4,5]
}]

我找不到一种很好的方法来做到这一点，即使使用 ng-repeat。一旦表单有大约 30 个字段和 15+ 种不同的输入类型，它就会变得非常丑陋。

"Angular"方法是什么，或者我应该在服务器上动态生成控制器.js和模板.html？

试试这个。这不是答案，只是一种方法。希望它能帮助你。

.HTML：

<div ng-repeat="person in person">
<form class="form-group" name="signinForm">
<label>Name:
<input class="form-control" ng-model="person.name" type="text">
</label>
<label>Male:
<input class="form-control" ng-model="person.gender" name="gender{{$index}}" type="radio" value="male">
</label>
<label>Female:
<input class="form-control" ng-model="person.gender" name="gender{{$index}}" type="radio" value="female">
</label><br>
<label>Age
<input class="form-control" ng-model="person.age" type="number">
</label>
</form>
<button type="button" ng-click="addPerson()">Add More</button>
</div>

.JS：

 $scope.initialize = [{}];
    $scope.person = {};
    $scope.addPerson = function(){
        $scope.initialize.push({});// adding more similar fields.
    }
相关文章：