javascript - Conditional ui-view for "active" item in ng-repeat -

scenario:

i have list of items rendered within ng-repeat.

each item has item template.

when 1 of items clicked, item becomes "active". item has different template other items in list.

by default, first item in list "active".

---

is possible use ui-router accomplish this? know can use templateurl function state parameters, applied items.

if possible, i'd avoid using ng-if/ng-switch since active item have several possible nested states different 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 configure change template "active" item in list?        .state("list.item", {          url: "/list/item/:itemid"        });    });    angular.module("app")    .controller("listctrl", function($state) {        // retrieved 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>

take @ http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref-active

you should like:

<a ui-sref="list.item({itemid: item.id})" ui-serf-active="active">{{ item.name }}</a>