角度中的动态偏导

Question

我有一个angular应用程序，列出了用户需要服务的项目，类似于待办事项列表。每个待办事项都需要不同的字段才能完成任务。制定待办事项清单很简单。我的问题是，如何让每个待办事项展开以显示一组不同的“子部分”？如下图所示：

+---------------------------------------------------------+
| To do #1                                                |
+---------------------------------------------------------+
| To do #2                                                |
+---------------------------------------------------------+
| To do #3                                                |
+---------------------------------------------------------+

用户单击以展开第一个待办事项：

+---------------------------------------------------------+
| To do #1                                                |
|                                                         |
| +--------------+  +--------------+  +--------------+    |
| | partial A    |  | partial B    |  | partial C    |    |
| +--------------+  +--------------+  +--------------+    |
+---------------------------------------------------------+
| To do #2                                                |
+---------------------------------------------------------+
| To do #3                                                |
+---------------------------------------------------------+

用户扩展第二个待办事项：

+---------------------------------------------------------+
| To do #1                                                |
+---------------------------------------------------------+
| To do #2                                                |
|                                                         |
| +--------------+  +--------------+  +--------------+    |
| | partial A    |  | partial D    |  | partial E    |    |
| +--------------+  +--------------+  +--------------+    |
+---------------------------------------------------------+
| To do #3                                                |
+---------------------------------------------------------+

通常，其中一个子部分可能具有3-10个字段。请注意，它们中的一些会被重用，但在每个待办事项中会有所不同。我希望有大约30个次偏音。

在Angular中，这样的事情有可能以一种干净的方式完成吗？我一直在研究ui-router，但我不知道它是否可以为每个待办事项设置不同的值。有没有别的方法或者更好的方法呢？欢迎提出任何建议。

如果可能的话，我也想动态加载控制器，但这是主要目标的次要目标。

如果有必要，我可以让所选择的待办事项和子部分显示在模式弹出对话框中，而不是展开。

Answer 1

我在我的上一个应用程序中所做的是将我想要加载的子部分的名称设置为$scope变量，然后在ng-include中使用该变量。

.when('/team/:team', {
      'template': "<div ng-include=\"nav.template\"></div>",
      'controller': 'TeamCtrl',
 }

然后在我的控制器中的某处：

$scope.nav.template = 'app/partials/team/' + $routeParams.team + '.html';

这让我可以快速扩展想要链接的团队的数量，而不需要更改我的代码并单独添加每个团队。我认为这个逻辑可以扩展以满足您的需求。

请注意，在我的示例中，整个过程都是在路由器中设置的，但您也可以从控制器执行此操作，并将动态ng-include设置在另一个部分中。