AngularJS dynamically change template for ng-repeat directive

Question

Is it possible to change the template ng-repeat uses to render each element dynamically, as in say on selection of an element switch from a table/list view to an alternate view displaying only that element?

What I want is, upon selection of an element in a ng-repeat table/list switch to a display only of the selected element. But I want to keep the ng-repeat structure (filters, pagination) in place as I would like to be able to navigate through each element one at a time (left and right say) and at any point return to the table/list with its structure in place.

Maybe it is easier to switch to a new route with the new template once an element is selected but then how could I maintain navigation through only the filtered items and revert back to the saved state of the ng-repeat on return to that route?

I hope I explained that well enough, thank you in advance.

Answer 1

You can use the ng-switch directive within the ng-repeat directive. Here's a basic example:

<ul>
  <li ng-repeat="color in colors" ng-switch on="color.value" >
    <span ng-switch-when="orange" style="background-color:{{color.value}};">{{color.name}}</span>
    <span ng-switch-default>{{color.name}}</span>
  </li>
</ul>

Full jsFiddle.

UPDATE

In the comments Ninja Pants clarified the ultimate goal was to use ng-include to include the templates. Here's the updated snippet showing how to do that:

<ul>
  <li ng-repeat="color in colors" ng-switch on="color.value" >
    <span ng-switch-when="orange" ng-include src="'template.html'"></span>
    <span ng-switch-when="indigo" ng-include src="'template2.html'"></span>
    <span ng-switch-default>{{color.name}}</span>
  </li>
</ul>

And a full Plunker demo.