AngularJS dynamically changes the template for the ng-repeat directive

Question

Is it possible to change the ng-repeat template to render each element dynamically, for example, when choosing an element selector from a table / list view to an alternative view that displays only that element?

I want that when selecting an item in the list table, the list appears only for the selected item. But I want to keep the ng-repeat structure (filters, pagination) in place, since I would like to be able to move through each element one at a time (left and right) and return to the table / list at any time using its in-place structure .

Maybe it’s easier to switch to a new route with a new template after selecting an item, and then how can I support navigation only through filtered items and return to the saved ng-repeat state when I return to this route?

Hope I explained it well enough, thanks in advance.

Answer 1

You can use the ng-switch directive in the ng-repeat directive. Here is 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 explained that the ultimate goal was to use ng-include to include templates. Here's an updated snippet showing how to do this:

 <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 demonstration of Plunker .