根据下拉列表更改ui-view

Question

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

到目前为止，我已经设置了Plunker。

基本上下拉有INV和BTW等选项，所以我需要根据它加载Ui-view。

<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详细说明了如何执行此操作。

编辑：您不应使用模板功能动态更改视图。