根据用户输入显示或隐藏元素答案

【问题标题】：show or hide the element based on the user input根据用户输入显示或隐藏元素
【发布时间】：2017-10-02 20:08:02
【问题描述】：

我想根据 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="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>

【问题讨论】：

标签： javascript html angularjs

【解决方案1】：

您应该使用 RouteProvider 和 routeParams。

例如

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

现在通过在控制器中注入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>

【讨论】：

我认为当我检查 ng-show='{{param1 =='testValue'}}' 它只是隐藏选项卡下显示的内容而不是隐藏选项卡本身。我的要求是隐藏标签
哦。您可以根据从url 收到的值在tabs 数组中添加值。正如@manoj patidar 在他的回答中提到的那样

【解决方案2】：

您需要在 JavaScript 中使用 location 提供程序 https://docs.angularjs.org/api/ng/service/$location

const url = location.url();

并在您的 HTML ng-if="tabName === 'Tab3' || url === 'http://myURL.com/showAll'" 中更新您的状况

您的 HTML 中还有两个 ID 为 tab2，您应该修复它，但您在 tab1 中缺少一个 col-sm-12 div 容器

【讨论】：

我试图打印 {{location.url}}，它没有打印任何东西..@GumZ
你必须先定义位置，你唯一的变量是 url，所以你可以打印 {{url}}，然后你会得到 location.url()

【解决方案3】：

为此，您将需要 ui-router 并设置路由，以便您的 /showAll 将是不同的路由并解析不同的参数。

这将是您的主要路线： http://myURL.com

这需要一些参数： http://myURL.com/:showParameter

然后在第二个解析中，您可以检查 showParameter 是否为 showAll 并解析您想要的任何内容 - 即公开一些显示/隐藏变量。

https://github.com/angular-ui/ui-router

【讨论】：