hide or show the data based on the dropdown value selected

Question

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

Since You have two controllers you might have a look at the broadcast and emit events in angular. — Shiv Kumar Ganesh, Jun 05 '17 at 04:15
I see you are also using two controllers. Then I have directed in the answer how to use two controller and a factory to do this. — Shiv Kumar Ganesh, Jun 05 '17 at 04:23
@ShivKumarGanesh - As a newbie that was my thought of having two controllers, i want the value of the dropdown list assinged to $rootScope variable in js code. how can i achieve that? — user3684675, Jun 05 '17 at 04:41

Sajeetharan · Accepted Answer · 2017-06-05T04:45:07.550

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>

i want the value of selected option in js code, as i need to use that value in my service layer to perform some dynamic operations. I want to set the value of selected option in $rootScope variable of js code, please advice. — user3684675, Jun 05 '17 at 04:40
@user3684675 you can still call a function on ng-change and use the variable — Sajeetharan, Jun 05 '17 at 04:41
In my post my other question was i want to show the first option to be selected by default. Now its showing blank. Please advice @Sajeetharan — user3684675, Jun 05 '17 at 04:43
@user3684675 check the updated answer, inorder to set the default value you just set the variable $scope.selectedValue = 'show'; — Sajeetharan, Jun 05 '17 at 04:45
+1, thanks for the update, one last question as i asked before, in js code $scope.selectedValue = 'show', can i get the selected dropdown option value dynamically whenever the user changes the option in the js code.@Sajeetharan — user3684675, Jun 05 '17 at 04:50
yes you can using ng-change=function() and get the value in controller like you showed in code — Sajeetharan, Jun 05 '17 at 04:50
Please see my updated link http://plnkr.co/edit/x1i8mHQPcy7Sfn0cMNxl?p=preview . When i used g-change, show and hide functionality is not working. — user3684675, Jun 05 '17 at 04:56
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/145840/discussion-between-sajeetharan-and-user3684675). — Sajeetharan, Jun 05 '17 at 04:59

score 1 · Answer 2 · answered Jun 05 '17 at 04:21

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

score 1 · Answer 3 · answered Jun 05 '17 at 06:53

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>

hide or show the data based on the dropdown value selected

3 Answers3