动态生成文本框，动态生成AngularJS表单

Question

我想根据用户为每个块输入的值创建文本框，并以以下格式获取保存为JSON的信息：

[
  {
    "Student1": {
      "college_name": "abc",
      "age": 20,
      "total_courses": 2,
      "course_1_name": "angularjs",
      "course_2_name": "nodejs"
    }
  },
  {
    "Student2": {
      "college_name": "xyz",
      "age": 22,
      "total_courses": 3,
      "course_1_name": "angularjs",
      "course_2_name": "nodejs",
      "course_3_name": "python"
    }
  }
]

角度代码将具有显示以下形式的html代码：

现在，如果我单击“添加更多”按钮，这将为用户带来另一个空白表格，如下所示，位于已填写的上述表格的正下方：

现在，当我填写表格时，如果我输入的课程总数为3，它应该动态显示3个文本框，如下所示：

现在，当我填写3个课程名称时，它将显示如下：

现在的表单将显示如下：

现在，当用户单击“提交”按钮时，应将信息以JSON格式保存，如下所述：

[
  {
    "Student1": {
      "college_name": "abc",
      "age": 20,
      "total_courses": 2,
      "course_1_name": "angularjs",
      "course_2_name": "nodejs"
    }
  },
  {
    "Student2": {
      "college_name": "xyz",
      "age": 22,
      "total_courses": 3,
      "course_1_name": "angularjs",
      "course_2_name": "nodejs",
      "course_3_name": "python"
    }
  }
]