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

Answer 1

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> 

Answer 2

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

Answer 3

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>