Question

场景：

我有一个在ng-repeat中呈现的项目列表。

每个项目都有一个项目模板。

当点击其中一个项目时，该项目变为“活动”＃34;。然后该项目与列表中的其他项目具有不同的模板。

默认情况下，列表中的第一项是＆＃34;有效＆＃34;。

是否可以使用ui-router来完成此任务？我知道我可以使用templateURL函数来获取状态参数，但它会应用于所有项目。

如果可能的话，我想避免使用ng-if / ng-switch，因为活动项目也有几种可能的嵌套状态和不同的模板。

＆＃13;

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 to configure this to change template for "active" item in the list?
      .state("list.item", {
        url: "/list/item/:itemId"
      });
  });

angular.module("app")
  .controller("ListCtrl", function($state) {
      // this would be 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})
  });

＆＃13;

<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>

＆＃13;

Answer 1

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

你应该做点什么：

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

条件ui-view for＆＃34; active＆＃34; ng-repeat中的项目

1 个答案: