Adam Penn Adam Penn - 10 months ago 56
AngularJS Question

Changing ui-view based on dropdown

I have a page that is built of a few partials and I am trying to load on of these based off of what the user chooses from a drop down.

I have a Plunker set up with what I have so far.

Basically the drop down has options like INV and BTW so I need to load the Ui-view based on that.

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

The name of the view should change based on the selected option.

Any Help is greatly appreciated. Also if the is not possible with UI-View what is an alternative to loading these different partials based on the drop down.


There are a number of options available to you.

Option 1

Use an ng-switch to show hide different parts of the page depending on the value of the dropdown. You can then use ng-include to include the partials.

<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>

This plnkr also details another method (taken from the angularjs docs on ng-include

Option 2

Dynamically change the template, this blog post or this SO question details how to do so.

edit: You shouldn't use the template function to dynamically change the view.