Question

我试图在点击时使用ng-click隐藏和显示面板。我知道这不是一个好方法，但我没有任何逻辑如何处理，因为我是angularjs的新手请你回答我希望你理解我想问的问题

// about panel
    $scope.activePanelAbout = function() {
    $scope.infoPanel = false;
    $scope.aboutPanel = true;
    $scope.expPanel = false;
    $scope.eduPanel = false;
    $scope.skillPanel = false;
    $scope.certiPanel = false;
    $scope.refPanel = false;
  }
  // experience panel
    $scope.activePanelExp = function() {
    $scope.infoPanel = false;
    $scope.aboutPanel = false;
    $scope.expPanel = true;
    $scope.eduPanel = false;
    $scope.skillPanel = false;
    $scope.certiPanel = false;
    $scope.refPanel = false;
  }
  // education panel
    $scope.activePanelEdu = function() {
    $scope.infoPanel = false;
    $scope.aboutPanel = false;
    $scope.expPanel = false;
    $scope.eduPanel = true;
    $scope.skillPanel = false;
    $scope.certiPanel = false;
    $scope.refPanel = false;
  }
  // skill panel
    $scope.activePanelSkill = function() {
    $scope.infoPanel = false;
    $scope.aboutPanel = false;
    $scope.expPanel = false;
    $scope.eduPanel = false;
    $scope.skillPanel = true;
    $scope.certiPanel = false;
    $scope.refPanel = false;
  }

Answer 1

有很多重复，所以你可以尝试重置所有这些都在false的常用功能中。

＆＃13;

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  // reset
  $scope.reset = function() {
    $scope.infoPanel = false;
    $scope.aboutPanel = false;
    $scope.expPanel = false;
    $scope.eduPanel = false;
    $scope.skillPanel = false;
    $scope.certiPanel = false;
    $scope.refPanel = false;
  }
  $scope.reset(); // initialise
  // about panel
  $scope.activePanelAbout = function() {
    $scope.aboutPanel = true;
  }
  // experience panel
  $scope.activePanelExp = function() {
    $scope.expPanel = true;
  }
  // education panel
  $scope.activePanelEdu = function() {
    $scope.eduPanel = true;
  }
  // skill panel
  $scope.activePanelSkill = function() {
    $scope.skillPanel = true;
  }

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

  <button ng-click="reset()">X</button>
  <button ng-click="reset();activePanelAbout()">About</button>
  <button ng-click="reset();activePanelExp()">Experience</button>
  <button ng-click="reset();activePanelEdu()">Education</button>
  <button ng-click="reset();activePanelSkill()">Skill</button>

  <br>aboutPanel {{aboutPanel}}
  <br>activePanelExp {{expPanel}}
  <br>activePanelEdu {{eduPanel}}
  <br>activePanelSkill {{skillPanel}}

</div>

＆＃13;

还取决于您想要的面板，您可以使用ui-bootstrap手风琴以更简单的方式显示您的数据：

＆＃13;

var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('myCtrl', function($scope) {
  $scope.panels = [{
      panel: "infoPanel",
      title: 'Info',
      content: 'Information Panel'
    },
    {
      panel: "aboutPanel",
      title: 'About',
      content: 'About Panel'
    },
    {
      panel: "expPanel",
      title: 'Experience',
      content: 'Experience Panel'
    },
    {
      panel: "eduPanel",
      title: 'Education',
      content: 'Education Panel'
    }
  ];
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<div ng-app="myApp" ng-controller="myCtrl">

  <uib-accordion close-others="true">
    <div uib-accordion-group class="panel-default" heading="{{panel.title}}" ng-repeat="panel in panels">
      {{panel.content}}
    </div>
  </uib-accordion>

</div>

＆＃13;

angularjs隐藏显示panals和类

1 个答案: