我想根据网址显示或隐藏标签(Tab3)。
演示:http://plnkr.co/edit/z4h5sfcaZLDXZ8xI7KDU?p=preview
示例)当用户登录到应用程序http://myURL.com时,应显示前两个选项卡(Tab1,Tab2),并且应隐藏Tab3,并且当用户键入http://myURL.com/showAll所有选项卡时(Tab1,Tab2,应显示Tab3)。有关如何根据用户输入的URL路径显示或隐藏选项卡的任何输入?
示例代码:
<div ng-app="tabs" ng-controller="tabsctrl">
<div>
<div class="top-tabs">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="{{ tab.tabValue == activeModule? 'active':''}}" ng-repeat="tab in tabs">
<a href="javascript:void(0)" ng-click="tabAction(tab.tabValue,tab.tabName)">{{tab.tabName}}</a>
</li>
</ul>
<div class="tab-content">
<div ng-if="tabName === 'Tab1'" role="tabpanel" class="tab-pane active" id="tab1">
<div class="row">
Tab1 contnet
</div>
</div>
</div>
<div ng-if="tabName === 'Tab2'" role="tabpanel" class="tab-pane active" id="tab2">
<div class="row">
<div class="col-sm-12">
Tab2 data
</div>
</div>
</div>
</div>
<div ng-if="tabName === 'Tab3'" role="tabpanel" class="tab-pane active" id="tab2">
<div class="row">
<div class="col-sm-12">
This tab should be shown based on the URL path
</div>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分:1)
您应该使用RouteProvider和routeParams。
例如
$routeProvider.when('/yourView/:param1/:param2', {
templateUrl: 'yourViewHTMLFile.html',
controller: 'yourController'
});
现在通过在控制器中注入params
来获取URL
中给出的$routeParams
值
.controller('yourController', ['$scope','$routeParams', function($scope,
$routeParams) {
$scope.param1 = $routeParams.param1; // just as an example to model this in view
var param2 = $routeParams.param2; //change here from param1 to
param2
...
}]);
接下来很简单。只需根据值显示/隐藏标签。
例如
<div id='tab1'>Tab1</div>
<div id='tab2'>Tab2</div>
<div id='tab3' ng-show='{{param1 =='testValue'}}'>Tab3</div>
答案 1 :(得分:0)
您需要在JavaScript中使用location
提供程序
https://docs.angularjs.org/api/ng/service/ $位置
const url = location.url();
并在您的HTML ng-if="tabName === 'Tab3' || url === 'http://myURL.com/showAll'"
您的HTML中还有两个tab2
的ID,您应该修复这些ID,并且您在tab1中缺少col-sm-12
div
容器
答案 2 :(得分:0)
为此你需要ui-router并设置路由,这样你的/ showAll将是不同的路由,并将解析不同的参数。
这将是您的主要途径: http://myURL.com
这需要一些参数: http://myURL.com/:showParameter
然后在第二步你可以检查showParame是否是showAll并解决你想要的任何东西 - 即暴露一些show / hide变量。