CODEWITHSUNDEEP
javascriptjqueryhtmlangularjs
user3684675
user3684675

Reputation: 381

hide or show the data based on the dropdown value selected

I am working on angularjs application. My requirement is to hide or show the data based on the dropdown list value selected. If i choose the option Show from dropdown list, i need to display the tab's data, if user selects 'Hide' from dropdown list, the content inside the tab should not be displayed.Please advice.

One approach i want to follow is ,by default the option should be Show in the dropdown list and the tab data should be available and when user selects hide, the tab content should be hidden or should ot display. Please advice how to perform the same in angularjs. Another one i was tring is, right now my select box doesn't show any selected option ,by default i want to make "Show" option selected.Please find the demo here

js code:

var myApp = angular.module('tabs', [ 'ui.bootstrap']);
myApp.controller('tabsctrl', function ($rootScope,$scope) {
          $rootScope.tabName ='MyTab Name';

    $rootScope.tabValue="tab1Value";
    $scope.applicationData = {};
    $scope.activeModule = "tab1Value";
    $scope.programModules=[{"tabName":"Tab1","tabValue":"tab1Value"},{"tabName":"Tab2","tabValue":"tab2Value"}];
    $scope.loadApplicationData = function(tabVal,tabName){
        $rootScope.tabName =tabName;
        alert("$rootScope.tabName :: "+$rootScope.tabName);
        $rootScope.tabValue=tabVal;
        $scope.activeModule = tabVal;

    }; 
    $scope.loadApplicationData($scope.activeModule,'Tab1');


});
myApp.controller('chapter',function($scope,$http){
    $scope.modelidchange = function () {
        $scope.id = $scope.selectedValue;

        alert($scope.id)
    }
});

Upvotes: 1

Views: 2180

Answers (3)

shna
shna

Reputation: 39

You can use only only one controller to do these functionalities. One more thing instead of calling function to set default value, you could use ng-init in html page itself. And use ng-show instead of ng-if. cause, ng-if everytime it will create a DOM again and again once it is became true But ng-show only shows the hided part. so below code part that I have made changes. here you go,

var app = angular.module('app',[]);
            app.controller('tabCtrl',['$rootScope','$scope' ,function($rootScope,$scope){
                $rootScope.tabName ='MyTab Name';
                $rootScope.tabValue="tab1Value";
                $scope.applicationData = {};
                $scope.activeModule = "tab1Value";
                $scope.programModules=[{"tabName":"Tab1","tabValue":"tab1Value"},{"tabName":"Tab2","tabValue":"tab2Value"}];
                
                $scope.loadApplicationData = function(tabVal,tabName){
                    $rootScope.tabName =tabName;
                    if(tabName === 'Tab1'){
                        $scope.tab1Data = true;
                        $scope.tab2Data = false;
                    }else{
                        $scope.tab1Data = false;
                        $scope.tab2Data = true;
                    }
                    $rootScope.tabValue=tabVal;
                    $scope.activeModule = tabVal;
                }; 
                
                $scope.modelidchange = function () {
                    $scope.id = $scope.selectedValue;
                    if($scope.id === 'show'){
                       $scope.tab1 = true;
                       $scope.tab2 = true;
                    }else{
                        $scope.tab1 = false;
                        $scope.tab2 = false;
                    }
                };

        }]);
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
         <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div ng-app="app" ng-controller="tabCtrl">

   

 Select a Option: <select ng-init="selectedValue = 'show'" ng-model="selectedValue"  ng-change="modelidchange()" >
    <option value="show">Show</option>
    <option value="hide">Hide</option>
</select> <br><br>

<div >
    <div class="top-tabs">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="{{ pg.tabValue == activeModule? 'active':''}}" ng-repeat="pg in programModules">
                <a href="javascript:void(0)" ng-click="loadApplicationData(pg.tabValue,pg.tabName)">{{pg.tabName}}</a>
            </li>
        </ul>

        <div class="tab-content">
            <div  ng-init="tab1 = true;tab1Data = true " ng-show="tab1 === true && tab1Data === true" role="tabpanel" class="tab-pane active" id="tab1">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                Tab1 data
                            </div>This should be shown when user click tab1
                        </div>
                    </div>
                </div>
            </div>

            <div  ng-init="tab2 = true" ng-show="tab2 === true && tab2Data === true" role="tabpanel" class="tab-pane active" id="tab2">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                Tab2 data
                            </div>This should be shown when user click tab2
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

Upvotes: 1

Sajeetharan
Sajeetharan

Reputation: 222522

You do not need to have two separate controllers, you can easily do this by having a single controller.

just use ng-if as you used to enable the tab based on the scope variable.

 <div ng-if="tabName === 'Tab1'" role="tabpanel" class="tab-pane active" id="tab1">
   <div class="row">
            <div class="col-sm-12">
              <div ng-if="selectedValue ==='show'" class="panel panel-primary">
                <div class="panel-heading">
                  Tab1 data
                </div>This should be shown when user click tab1
              </div>
            </div>
          </div>
   </div>

DEMO

var myApp = angular.module('tabs', ['ui.bootstrap']);
myApp.controller('tabsctrl', function($rootScope, $scope) {
  $rootScope.tabName = 'MyTab Name';
  $rootScope.tabValue = "tab1Value";
  $scope.applicationData = {};
  $scope.selectedValue = 'show';
  $scope.activeModule = "tab1Value";
  $scope.programModules = [{
    "tabName": "Tab1",
    "tabValue": "tab1Value"
  }, {
    "tabName": "Tab2",
    "tabValue": "tab2Value"
  }];
  $scope.loadApplicationData = function(tabVal, tabName) {
    $rootScope.tabName = tabName;
    $rootScope.tabValue = tabVal;
    $scope.activeModule = tabVal;

  };
  $scope.loadApplicationData($scope.activeModule, 'Tab1');
});
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js">
</script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<div ng-app="tabs" ng-controller="tabsctrl">

  Select a Option:
  <select ng-model="selectedValue" ng-change="modelidchange()">
    <option value="show">Show</option>
    <option value="hide">Hide</option>
  </select>
  <br>
  <br>

  <div>
    <div class="top-tabs">
      <!-- Nav tabs -->
      <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="{{ pg.tabValue == activeModule? 'active':''}}" ng-repeat="pg in programModules">
          <a href="javascript:void(0)" ng-click="loadApplicationData(pg.tabValue,pg.tabName)">{{pg.tabName}}</a>
        </li>
      </ul>

      <div class="tab-content">
        <div ng-if="tabName === 'Tab1'" role="tabpanel" class="tab-pane active" id="tab1">
          <div class="row">
            <div class="col-sm-12">
              <div ng-if="selectedValue ==='show'" class="panel panel-primary">
                <div class="panel-heading">
                  Tab1 data
                </div>This should be shown when user click tab1
              </div>
            </div>
          </div>
        </div>

        <div ng-if="tabName === 'Tab2'" role="tabpanel" class="tab-pane active" id="tab2">
          <div class="row">
            <div class="col-sm-12">
              <div ng-if="selectedValue ==='show'" class="panel panel-primary">
                <div class="panel-heading">
                  Tab2 data
                </div>This should be shown when user click tab2
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Shiv Kumar Ganesh
Shiv Kumar Ganesh

Reputation: 3825

You can go ahead and create a Factory to share data. That will be the easiest step. A simple factory will look something link this.

myApp.factory('Fact', function(){
  return { Field: '' };
});

You can use this and update the value of Field whenever you change data. Since you are having two controller I will recommend you to avoid the root scope and use service or factory. Have a look at this answer. Will be helpful.

Share data between AngularJS controllers

Upvotes: 1

Related Questions