根据下拉菜单更改 ui-view

Question

我有一个由几个部分组成的页面，我正在尝试根据用户从下拉列表中选择的内容来加载这些部分。

我有一个Plunker 设置了我目前所拥有的。

基本上下拉菜单有 INV 和 BTW 之类的选项，所以我需要根据它加载 Ui 视图。

<div ui-view="name of view e.g. INV"></div>

视图名称应根据所选选项更改。

非常感谢任何帮助。此外，如果 UI-View 无法实现，那么基于下拉菜单加载这些不同部分的替代方法是什么。

Answer 1

您有多种选择。

选项 1

使用ng-switch 显示隐藏页面的不同部分，具体取决于下拉列表的值。然后，您可以使用 ng-include 来包含部分内容。

<div ng-switch="view">
  <div ng-switch-when="INV" ng-include="inv.template.html"></div>
  <div ng-switch-when="OTHER" ng-include="other.template.html"></div>
  <div ng-switch-default ng-include="default.template.html"></div>
</div>

此plnkr 还详细介绍了另一种方法（取自 ng-include 上的 angularjs 文档

选项 2

动态更改模板，this blog post 或 this SO question 详细说明如何操作。

edit：你不应该使用模板函数来动态改变视图。