Question

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

我想要遵循的一种方法是，默认情况下，选项应该在下拉列表中显示，并且选项卡数据应该可用，当用户选择隐藏时，选项卡内容应该隐藏或应该显示。请告知如何在angularjs中执行相同的操作。另一个我正在考虑的是，现在我的选择框没有显示任何选择的选项，默认情况下我想选择“显示”选项。请找到演示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

您不需要拥有两个独立的控制器，只需使用一个控制器即可轻松完成此操作。

只需使用 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>

<强>样本

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

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

Share data between AngularJS controllers

Answer 3

您只能使用一个控制器来执行这些功能。还有一件事，而不是调用函数来设置默认值，你可以在html页面本身使用ng-init。并使用ng-show而不是ng-if。原因，ng-if每次它会一次又一次地创建一个DOM但是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>

根据所选的下拉值隐藏或显示数据

3 个答案: