gpt4 book ai didi

javascript - 根据用户输入显示或隐藏元素

转载 作者:行者123 更新时间:2023-12-03 03:21:58 27 4
gpt4 key购买 nike

我想根据 URL 显示或隐藏选项卡(Tab3)。

演示:http://plnkr.co/edit/z4h5sfcaZLDXZ8xI7KDU?p=preview

示例)当用户登录应用程序 http://myURL.com 时,当用户输入 http://myURL.com/showAll 时,应显示前两个选项卡(Tab1、Tab2)并隐藏 Tab3。应显示所有选项卡(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>

最佳答案

您应该使用RouteProvider 和routeParams。

例如

$routeProvider.when('/yourView/:param1/:param2', {
templateUrl: 'yourViewHTMLFile.html',
controller: 'yourController'
});

现在,通过在 Controller 中注入(inject) n$routeParams 来获取 URL 中给出的 params 的值

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

关于javascript - 根据用户输入显示或隐藏元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46532947/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com