Angularjs - Akkordeon funktioniert nicht wie erwartet

Question

mit dem angularjs habe ich ein Akkordeon Effekte erstellt. alles funktioniert eher, als das andere Panel zu berücksichtigen.

mein Akkordeon hat 2 Panels, wenn ich auf das erste Panel klicke, sollte das den Status ändern (das passiert) und andere Panels schließen müssen, wenn das öffnet. wie geht das?

var app = angular.module('myapp', []); 
 
app.controller('MainCtrl', function($scope) { 
 
    $scope.one = false; 
 
    $scope.two = false; 
 
    $scope.accordion = function(label) { 
 
     $scope[label] = !$scope[label]; 
 
    } 
 
});

h1 { 
 
    background: gray; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myapp" ng-controller="MainCtrl"> 
 
    <h1 ng-click="accordion('one')">Title One</h1> 
 
    <div ng-show="one">Content one</div> 
 
    <h1 ng-click="accordion('two')">Title Two</h1> 
 
    <div ng-show="two">Content Two</div> 
 
</div>

Answer 1

Es ist einfach eine Frage der Zuordnung der einzelnen Variablen, ohne komplexe Logik. Entfernen Sie daher die redundante Funktion und verschieben Sie die Zuweisung in HTML auf ng-click.

var app = angular.module('myapp', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 
    
 
    //$scope.one = false; // this is not required anymore 
 
    //$scope.two = false; // this is not required anymore 
 
    $scope.current = 'one'; 
 
    // toggle accordion state 
 
    $scope.toggleAccordion = function(label){ 
 
     if($scope.current == label){ 
 
       $scope.current = ''; 
 
     } else { 
 
       $scope.current = label; 
 
     } 
 
    } 
 
    
 
});

h1{ 
 
    background:gray; 
 
    cursor:pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
    <div ng-app="myapp" ng-controller="MainCtrl"> 
 
    <h1 ng-click="toggleAccordion('one')">Title One</h1> 
 
    <div ng-show="current == 'one'">Content one</div> 
 
    <h1 ng-click="toggleAccordion('two')">Title Two</h1> 
 
    <div ng-show="current == 'two'">Content Two</div> 
 
    </div>