Question

我尝试使用AngularJS在Web应用中创建提交表单，其中每个表单条目的选项取决于对先前表单条目的响应。为了简单起见，我希望将其全部保存在一个页面上，并且在上一个表单条目填充之前，其他表单项将显示为灰色，或者在验证上一个响应时，将弹出。我想这个概念可能有一个名字，但我很难通过尝试为相关搜索结果获得正确的关键字来找到该想法的示例或教程。这个概念叫什么？

以下是表单的简化示例，其中用户提交锦标赛结果。常量提供程序提供定义下拉选项的对象（例如allSports.team=['Basketball', Soccer', ...]），但显示哪些选项取决于以前的用户输入（例如category=team）。

- What is the name of the tournament?
- What category of tournament sport is it? (drop down)
  - Team (yes)
  - Individual
- What sport is it? (drop down)
  - Basketball
  - Soccer (yes)
- How many games were played in the tournament? (text entry)
  - 3*
- For game 1, what was the name of the home team?
  - Cougars
- For game 1, what was the name of the away team?
  - Penguin
- Indicate which team won game 1:
  - Cougars (yes) 
  - Penguins
- (repeat for games 2-3)

提交按钮会将tournament对象添加到tournaments对象数组中，类似于以下内容：

var tournaments = [
  { 'tourneyName' = 'Cougar Classic',
    'sportType' = 'Team',
    'sportName' = 'Soccer',
    'games' = [
      { 'teams' = [ 'Cougars', 'Penguins' ],
        'winner' = 'Cougars' },
      { 'teams' = [ 'Cougars', 'Penguins' ],
        'winner' = 'Penguins' },
      { 'teams' = [ 'Cougars', 'Penguins' ],
        'winner' = 'Cougars' }
      ]       
  },
  (next tournament)  
]

在网络应用程序上，用户可以按特定标准搜索锦标赛（所有篮球锦标赛，企鹅赢得的足球锦标赛，所有个人运动等）。

您可以提供帮助我完成此类任务的任何资源或帮助，我们将不胜感激。我非常熟悉Angular和简单表单提交的基础知识，但我还没有在我已经完成的教程中找到这个范围的东西。此外，我正在使用角度流星进行此项工作，因此如果任何有专业知识的人都有更具体的建议（相关包裹等），那将非常受欢迎。

Answer 1

我想出了我所寻找的概念的名称被称为“级联选择”。一旦我弄明白了，我就能找到一些有用的资源来实现这一目标。 Here is one example。知道正确的词汇量有多么重要！

我发现angular-formly完成了我正在寻找的许多其他事情，因为可以集成级联，可以交互式启用/禁用选项等等。

我希望这个发现有助于其他人！

在AngularJS中创建向下钻取表单

1 个答案: