Here is the situation:
I'm working with a list of items that are displayed using ng-repeat.
Each item has its own template.
When a user clicks on an item, that particular item is marked as "active" and gets a different template compared to the rest of the items in the list.
By default, the first item in the list is always set as "active".
My question is: Can I achieve this functionality using ui-router? I'm aware that I can use a templateURL function to access the state parameters, but it would affect all items in the list.
If possible, I'd prefer not to use ng-if/ng-switch as the active item may have multiple nested states with unique templates.
angular.module("app", ["ui.router"]);
angular.module("app")
.config(function($stateProvider) {
$stateProvider
.state("list", {
url: "/list",
abstract: true,
templateUrl: "list.html"
controller: "ListCtrl",
controllerAs: "listC",
})
// How can I configure this to change the template for the "active" item in the list?
.state("list.item", {
url: "/list/item/:itemId"
});
});
angular.module("app")
.controller("ListCtrl", function($state) {
// This data would be fetched asynchronously
this.items = [
{id: 1, name: "One"},
{id: 2, name: "Two"},
{id: 3, name: "Three"},
];
$state.go("list.item", {itemId: this.items[0].id})
});<div ng-app="app" ui-view></div>
<script type="text/ng-template" id="list.html">
<ul>
<li ng-repeat="item in listC.items" ui-view></li>
</ul>
</script>
<script type="text/ng-template" id="list-item.html">
<a ui-sref="list.item({itemId: item.id})">{{ item.name }}</a>
</script>
<script type="text/ng-template" id="list-item-active.html">
<h3>{{ item.name }}<h3>
</script>