使用动态文本框生成动态生成AngularJS表单

2024-03-29 14:00:19 发布

您现在位置:Python中文网/ 问答频道 /正文

我想根据用户为每个块输入的值创建文本框,并以以下格式将保存的信息发布为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代码显示如下表单:

enter image description here

现在,如果我单击“添加更多”按钮,这将为用户带来另一个空白表单,如下所示,就在上面已填写的表单的下方:

enter image description here

现在,当我填写表单时,如果我输入total courses作为3,它将动态显示3个文本框,如下所示:

enter image description here

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

enter image description here

现在表单将显示如下:

enter image description here

现在,当用户单击submit按钮时,它应该以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"
    }
  }
]

Tags: 用户namejson表单age格式nodejstotal