根据用户输入显示或隐藏元素 [英] show or hide the element based on the user input

问题描述

我想根据URL显示或隐藏选项卡（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 =tabsng-controller =tabsctrl> 
< div> 
< div class =top-tabs> 
<！ - 导航标签 - > 
 
< li role =presentationclass ={{tab.tabValue == activeModule？'active'：''}}ng-repeat =标签中的标签> 
< 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 =tabpanelclass =tab-pane activeid =tab1> 
< div class =row> 
 Tab1 contnet 
< / div> 
< / div> 
< / div> 
 
< div ng-if =tabName ==='Tab2'role =tabpanelclass =tab-pane activeid =tab2> 
< div class =row> 
< div class =col-sm-12> 
 Tab2数据
< / div> 
< / div> 
< / div> 
< / div> 
 
< div ng-if =tabName ==='Tab3'role =tabpanelclass =tab-pane activeid =tab2> 
< div class =row> 
< div class =col-sm-12> 
此选项卡应基于URL路径
< / div>显示
< / div> 
 
< / div> 
< / div> 
< / div> 
< / div> 
  

解决方案

您应该使用RouteProvider和routeParams。

例如

  $ routeProvider.when（'/ yourView /：param1 / param2'，{
 templateUrl：'yourViewHTMLFile.html'，
 controller：'yourController'
}）; 
  

现在获取给定的 params 的值在您的控制器中注入 $ routeParams 作为 URL

  .controller（'yourController'，['$ scope'，'$ routeParams'，function（$ scope，
 $ routeParams）{
 $ scope.param1 = $ routeParams.param1; //只是作为一个例子来模拟这个视图
 var param2 = $ routeParams.param2; //在这里从param1更改为
 param2 
 ... 
}]）; 
  

接下来很简单。只需根据值显示/隐藏标签。

例如

 < div id ='tab1'> Tab1< / div> 
< div id ='tab2'> Tab2< / div> 
< div id ='tab3'ng-show ='{{param1 =='testValue'}}'> Tab3< / div> 
  

I want to show or hide the tab(Tab3) based on the URL.

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

example) when user logs into application http://myURL.com, the first two tabs(Tab1,Tab2) should be shown and Tab3 should be hidden and when user types http://myURL.com/showAll all the tabs(Tab1,Tab2,Tab3) should be displayed. Any inputs on how to show or hide the tabs based on the URL path the user has entered?

sample code:

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

解决方案

You should use RouteProvider and routeParams.

For example

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

Now get the values of params given in the URL by injectingn$routeParams in your controller as

.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
        ...
    }]);

Next is simple. Simply show/hide tabs based on the values.

For example

    <div id='tab1'>Tab1</div>
    <div id='tab2'>Tab2</div>
    <div id='tab3' ng-show='{{param1 =='testValue'}}'>Tab3</div>

这篇关于根据用户输入显示或隐藏元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！