如何使用Routeprovider切換部分？

Question

我希望有一個簡單的問題。

假設我有一個JSON對象，它是url /page-b

{
    "name": "Page B",
    "url": "page-b",
    "sections": [{
        "name": "A",
        "description": "Foo",
    }, {
        "name": "B",
        "description": "Bar",
    }, {
        "name": "C",
        "description": "Dog"
    }, {
        "name": "D",
        "description": "Cat",
    }]
}

每個頁面都有一個不同的JSON文件，但對於本示例，我將在B上運行它。

dashboard.controller('siteCtrl', ['$scope', '$http', '$rootScope', '$location', function($scope, $http, $rootScope, $location) {

  $rootScope.location = $location.path();

  var url = '';
  switch($rootScope.location) {
    case '/':
    case '/page-a':
      url = '/data/page-a.json';
    break;
    case '/page-b':
      url = '/data/page-b.json';
    break;
    case '/page-c':
      url = '/data/page-c.json';
    break;
  }

  $http.get(url).success(function(data){ 
    $scope.brandData = data;
  });

}]);

簡單的路由提供者，從哈希鍵獲取頁面。 我有這個簡單的菜單，我根本無法控制html，但我想切換json對象中的SECTIONS，而不是全部顯示，而是在page-b根頁面上有一個click事件，但是我我不確定如何確定單擊了哪個子鏈接。

<ul>
    <li><a href="/#/page-b" class="bg-binding">Page B</a>
        <ul>
            <li><a href="#" class="bg-binding">A</a></li>
            <li><a href="#" class="bg-binding">B</a></li>
            <li><a href="#" class="bg-binding">C</a></li>
            <li><a href="#" class="bg-binding">D</a></li>
        </ul>
    </li>
</ul>

我只希望能夠切換在子菜單元素上單擊的部分。 提供此代碼是否可行？

我注意到Angular將$$hashkey推入對象數組，這有用嗎？

Answer 1

如果您有一個范圍變量，例如：

$scope.activeSection ='A';

您可以將此值用作ng-repeat的過濾器，並使用ng-click在菜單中進行更改。 也可以在ng-class使用它來在菜單中設置活動類

<a ng-click="activeSection='A'" ng-class="{active: activeSection=='A'}">A</a>

<div ng-repeat="section in data.sections |filter: {'name': activeSection}">
   Name:{{section.name}}<br>
   Description: {{section.description}}
</div>

至於有角度的哈希鍵，最好不要理會它們。 請改用已記錄的api