根据选择的下拉值隐藏或显示数据答案

【问题标题】：hide or show the data based on the dropdown value selected根据选择的下拉值隐藏或显示数据
【发布时间】：2017-11-05 18:56:20
【问题描述】：

我正在开发 angularjs 应用程序。我的要求是根据选择的下拉列表值隐藏或显示数据。如果我选择从下拉列表中显示选项，我需要显示选项卡的数据，如果用户从下拉列表中选择“隐藏”，则不应显示选项卡内的内容。请建议。

我要遵循的一种方法是，默认情况下，下拉列表中的选项应为显示，并且选项卡数据应可用，当用户选择隐藏时，选项卡内容应隐藏或不显示。请建议如何在 angularjs 中执行相同的操作。我正在考虑的另一个问题是，现在我的选择框没有显示任何选定的选项，默认情况下我想选择“显示”选项。请找到演示here

js代码：

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

【问题讨论】：

由于您有两个控制器，您可能会查看广播并以角度发出事件。
我看到你也在使用两个控制器。然后我在答案中指导了如何使用两个控制器和一个工厂来做到这一点。
@ShivKumarGanesh - 作为一个我想拥有两个控制器的新手，我希望将下拉列表的值分配给 js 代码中的 $rootScope 变量。我怎样才能做到这一点？

标签： javascript jquery html angularjs

【解决方案1】：

您不需要拥有两个单独的控制器，只需一个控制器即可轻松做到这一点。

只需使用 ng-if，就像您之前根据范围变量启用选项卡一样。

 <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>

演示

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>

【讨论】：

我想要 js 代码中选定选项的值，因为我需要在我的服务层中使用该值来执行一些动态操作。我想在js代码的$rootScope变量中设置selected选项的值，请指教。
@user3684675 你仍然可以在 ng-change 上调用函数并使用变量
在我的帖子中，我的另一个问题是我想显示默认选择的第一个选项。现在它显示为空白。请建议@Sajeetharan
@user3684675 检查更新的答案，为了设置默认值，您只需设置变量 $scope.selectedValue = 'show';
+1，感谢更新，我之前问的最后一个问题，在 js 代码 $scope.selectedValue = 'show' 中，每当用户更改js代码中的选项。@Sajeetharan

【解决方案2】：

您可以继续创建工厂来共享数据。这将是最简单的一步。一个简单的工厂看起来会链接这个。

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

您可以在更改数据时使用它并更新 Field 的值。由于您有两个控制器，我建议您避开根范围并使用服务或工厂。看看这个答案。会有帮助的。

Share data between AngularJS controllers

【讨论】：

【解决方案3】：

您只能使用一个控制器来执行这些功能。还有一件事，而不是调用函数来设置默认值，您可以在 html 页面本身中使用 ng-init。并使用 ng-show 代替 ng-if。原因，ng-if 每次它都将一次又一次地创建一个 DOM，一旦它变为 true 但 ng-show 只显示隐藏的部分。所以下面的代码部分我做了改变。给你，

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>

【讨论】：