CODEWITHSUNDEEP
javascripthtmlangularjs
user8697117
user8697117

Reputation: 43

show or hide the element based on the user input

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>

Upvotes: 0

Views: 239

Answers (3)

Muhammad Usman
Muhammad Usman

Reputation: 10148

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>

Upvotes: 1

pegla
pegla

Reputation: 1866

For this you will need ui-router and set up routes so your /showAll would be different route and would resolve different parameters.

This would be your main route: http://myURL.com

and this would take some parameter: http://myURL.com/:showParameter

then in resolve of second you can check if showParameter is showAll and resolve whatever you want - i.e. expose some show/hide variable.

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

Upvotes: 0

greatgumz
greatgumz

Reputation: 418

You need to use location provider in your JavaScript https://docs.angularjs.org/api/ng/service/$location

const url = location.url();

and update your condition in your HTML ng-if="tabName === 'Tab3' || url === 'http://myURL.com/showAll'"

You are also have two ids of tab2 in your HTML, which you should fix and you are missing a col-sm-12 div container in tab1

Upvotes: 0

Related Questions