在 AngularJS 中创建一个向下钻取的表单答案

【问题标题】：Creating a drill-down form in AngularJS在 AngularJS 中创建一个向下钻取的表单
【发布时间】：2015-10-13 00:18:05
【问题描述】：

我正在尝试使用 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 的基础知识和简单的表单提交，但是在我完成的教程中我还没有真正找到这个范围的东西。另外，我正在使用 angular-meteor 来解决这个问题，所以如果有专业知识的人有任何更具体的建议（相关包等），那将是非常受欢迎的。

【问题讨论】：

能否尝试使用 getbootstrap 进行布局，并使用 angular-forms：docs.angularjs.org/guide/forms。
我建议你看看使用 angular-formly 的大量示例：angular-formly.com 你完全可以用 angular-formly 构建它，你会喜欢它的 :-)
太好了，我花了一点时间才让它正确地与 Meteor 一起工作，但我正在尝试角度形式。我看过所有的视频，似乎它会很好地完成这项工作。我想出了如何从名称/类型对象数组（scotch.io 教程）中为select 类型设置选项，但现在我需要弄清楚如何从另一个对象有条件地为选项创建名称/类型对象。另外，有没有办法使用它来创建可变数量的字段？在 OP 示例中，用户输入玩了 3 个游戏：你如何使生成 X 组游戏特定问题？
没关系，我在底部找到了！ :) angular-formly.com/#/example/advanced/repeating-section

标签： javascript angularjs forms meteor angular-meteor

【解决方案1】：

我发现我正在寻找的概念的名称叫做“级联选择”。一旦我弄清楚了这一点，我就能够找到许多有用的资源来实现这一点。 Here is one example。有趣的是，知道正确的词汇是多么重要！

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

我希望这个发现对其他人有所帮助！

【讨论】：