AngularJS dynamically change template for ng-repeat directive

angularjs, angularjs-ng-repeat

Solution

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.

Problem

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.

Original source