Angularjs - アコーディオンは期待通りに動作しません

Question

anglejsを使用して、私はアコーディオン効果を作成しました。それは他のパネルを考慮したものではなく、すべて機能します。

私のアコーディオンには2つのパネルがあります。最初のパネルをクリックすると、状態がシャッフルされ、開いたら他のパネルを閉じる必要があります。どうやってするか？

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

単にその任意の複雑なロジックのない単一の変数の代入の問題、。したがって、冗長な関数を削除し、HTML内で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>