Question

我正在尝试创建它创建的自定义Accordion但问题是当我点击第一个面板时所有剩余的手风琴面板都打开了我不知道该怎么做才能获得该功能并且我想将加号图标更改为减号图标我点击面板和副面我们将非常感谢您的帮助。

代码如下

HTML

<div ng-app ="myApp">
<div ng-controller="myController">
<h2>Accordion</h2>
<div  ng-repeat ="accd in accordion">
  <button class="accordion accordion-icon" id="aac1" ng-click="showAccordianPanel($event)">{{accd}}</button>
<div class="panel" ng-show="showContent">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>

的js

<script>
var myApp = angular.module('myApp',[]);
    myApp.controller("myController",function($scope){
    $scope.accordion =["section 1","section 2","section 3"]
    $scope.showContent=false;
    $scope.showAccordianPanel =function(ev){
    ev.target.showContent = true;
    $scope.showContent=!$scope.showContent
    } 
    })

</script>

的CSS

button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
    margin-bottom:5px;
}

button.accordion.active, button.accordion:hover {
    background-color: #ddd; 
}
.accordion-icon:before{
  content: '\002B';
    font-size: 13px;
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}
.minus-icon:before{
      content: "\2212";
      float: right;
}
div.panel {
    padding: 4px 20px;
   /*  display: none; */
    background-color: #ddd;
     margin-bottom:10px;
}

js小提琴是：https://jsfiddle.net/wL9ncvax/3/

Answer 1

而不是更新全局范围中的showContent属性（即控制器的范围），只更新迭代器内的相应窗格范围（ng-repeat）。

更新控制器：

var myApp = angular.module('myApp',[]);
myApp.controller("myController",function($scope){
    $scope.accordion =["section 1","section 2","section 3"]
    $scope.showContent=false;
    var lastActivePanelScope;
    $scope.showAccordianPanel =function(ev, itemScope){
        itemScope.showContent = !itemScope.showContent;

        if (lastActivePanelScope) {
            if (lastActivePanelScope !== itemScope) {
                lastActivePanelScope.showContent = false;
            }
        }

        if (itemScope.showContent) {
            lastActivePanelScope = itemScope;
        }    
    } 
});

在按钮上添加ng-class以在加号和减号图标之间切换

<button class="accordion" ng-class="showContent ? 'minus-icon': 'accordion-icon'"
        id="aac1" 
        ng-click="showAccordianPanel($event, this)">{{accd}}</button>

工作fiddle

Answer 2

您需要的只是showContent作为数组而不是单个变量。因此，

$scope.showContent = [false, false, false];
$scope.showAccordianPanel = function(index) {
  $scope.showContent[index] = !$scope.showContent[index]
}

而且，ng-repeat就像，

<div ng-repeat="accd in accordion">
  <button ... ng-click="showAccordianPanel($index)">{{accd}}</button>
  <div class="panel" ng-show="showContent[$index]">
    <p>content</p>
  </div>
</div>

请注意，我如何通过$index函数中的ng-click来打开仅点击的手风琴，而不是其他人。

working fiddle

试图在angularjs中创建自定义手风琴

2 个答案: