关闭angularjs中的其他手风琴元素

Question

我已经实现了我自己的手风琴元素，所以我没有使用ui-bootstrap。

我想关闭其他手风琴，当我点击另一个。

我目前有一个初始化函数，我声明所有手风琴都已关闭。当你点击其中一个手风琴时，它将激活toggleActive功能，切换点击的手风琴。如果您点击时另一个手风琴仍然打开，它应该关闭。只能开一个手风琴。

HTML

  <div class="job-item" ng-repeat="job in jobs"> 
       <div ng-init="init(job)" ng-click="toggleActive(job)" ng-class="{'job-heading-collapsed': job.active, 'job-heading-expanded': !job.active}"> 
        <h3>{{ job.title }}</h3> 
        <span ng-class="'fa fa-chevron-' + job.direction"></span> 
       </div> 

       <div class="slideDown" ng-hide="job.active"> 
        <div class="expand-collapse-content"> 
         <p>{{ job.description }}</p> 
        </div> 
       </div> 
      </div> 

控制器

var app = angular.module('myApp') 
.controller('JobsCtrl', function($scope, jobsService){ 
    var jobs = jobsService.getJobs(); 

    jobs.then(function (data) { 
     $scope.jobs = data.data; 
    }); 

      $scope.init = function(job) { 
        job.active = true; 
        job.direction = "down"; 
      } 

      $scope.toggleActive = function(job) { 
        job.active = !job.active; 

        if(job.active) { 
          job.direction = "down"; 
        } else { 
          job.direction = "up"; 
        } 
      } 
}); 

Answer 1

你只需要跟踪当前工作的和不断变化的新的工作状态之前点击改变其状态。您的toggleActive功能仅更改新Job的状态，而不是当前打开的作业。

在您的JobsCtrl中，保持跟踪哪项工作是最新的。

var current =null; 

在您的初始化，初始化当前。

current = job; 

在您的toggleActive中，首先更改当前状态，然后将其设置为新作业。

current.Active = !current.Active; 
current = job;