[英]How to use Routeprovider to toggle sections?
我希望有一个简单的问题。
假设我有一个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
推入对象数组,这有用吗?
如果您有一个范围变量,例如:
$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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.