Javascript Ng单击/Ng重复问题

我正在尝试使用角度js和角度材质创建手风琴。问题是，当我使用ng repeat时，当我单击按钮时，数组中的所有手风琴都会打开。我只想打开我点击的那个。你知道我是怎么做到的吗？我试着用谷歌搜索，但我找不到我想要的东西

    <div class="accordionheader" layout="row" layout-align="space-between center">
        <h3>{{question.q}}</h3>

        <md-button class="md-icon-button md-accent" aria-label="Favorite" ng-click="toggleaccordion(question)" ng-if="!question.accordionOpen">
            <md-icon md-svg-icon="images/add.svg"></md-icon>
        </md-button>
        <md-button class="md-icon-button md-accent" aria-label="Favorite" ng-click="toggleaccordion(question)" ng-if="question.accordionOpen">
            <md-icon md-svg-icon="images/minus.svg"></md-icon>
        </md-button>
    </div>
<!-- In ng-show use a variable which will make sure that every object will get it's own toggle status field -->
    <div class="accordioncontent" ng-show="question.accordionOpen">
        <p>{{question.a}}</p>
    </div>

</div>

这是我的html

<div class="accordionwrapper" layout="column" layout-align="center center">
    <div class="accordion" ng-repeat="question in questions">

        <div class="accordionheader" layout="row" layout-align="space-between center">
            <h3>{{question.q}}</h3>

            <md-button class="md-icon-button md-accent" aria-label="Favorite" ng-click="toggleaccordion()" ng-if="!accordionOpen">
                <md-icon md-svg-icon="images/add.svg"></md-icon>
            </md-button>
            <md-button class="md-icon-button md-accent" aria-label="Favorite" ng-click="toggleaccordion()" ng-if="accordionOpen">
                <md-icon md-svg-icon="images/minus.svg"></md-icon>
            </md-button>
        </div>

        <div class="accordioncontent" ng-show="accordionOpen">
            <p>{{question.a}}</p>
        </div>

    </div>

    <div class="accordionheader" layout="row" layout-align="space-between center">
        <h3>{{question.q}}</h3>

        <md-button class="md-icon-button md-accent" aria-label="Favorite" ng-click="toggleaccordion(question)" ng-if="!question.accordionOpen">
            <md-icon md-svg-icon="images/add.svg"></md-icon>
        </md-button>
        <md-button class="md-icon-button md-accent" aria-label="Favorite" ng-click="toggleaccordion(question)" ng-if="question.accordionOpen">
            <md-icon md-svg-icon="images/minus.svg"></md-icon>
        </md-button>
    </div>
<!-- In ng-show use a variable which will make sure that every object will get it's own toggle status field -->
    <div class="accordioncontent" ng-show="question.accordionOpen">
        <p>{{question.a}}</p>
    </div>

</div>

---

谢谢

您需要使用数组跟踪每个手风琴的状态。这意味着

accordiopen

应该是一个数组，而

toggleacordion

应该是这样的：

$scope.toggleaccordion = function($index){
  $scope.accordionOpen[$index] = !$scope.accordionOpen[$index]

    <div class="accordionheader" layout="row" layout-align="space-between center">
        <h3>{{question.q}}</h3>

        <md-button class="md-icon-button md-accent" aria-label="Favorite" ng-click="toggleaccordion(question)" ng-if="!question.accordionOpen">
            <md-icon md-svg-icon="images/add.svg"></md-icon>
        </md-button>
        <md-button class="md-icon-button md-accent" aria-label="Favorite" ng-click="toggleaccordion(question)" ng-if="question.accordionOpen">
            <md-icon md-svg-icon="images/minus.svg"></md-icon>
        </md-button>
    </div>
<!-- In ng-show use a variable which will make sure that every object will get it's own toggle status field -->
    <div class="accordioncontent" ng-show="question.accordionOpen">
        <p>{{question.a}}</p>
    </div>

</div>

最后，您应该使用

$index

变量调用函数，该变量由

ng repeat

中的angular提供：

<md-button class="md-icon-button md-accent" aria-label="Favorite" ng-click="toggleaccordion($index)" ng-if="accordionOpen[$index]">

    <div class="accordionheader" layout="row" layout-align="space-between center">
        <h3>{{question.q}}</h3>

        <md-button class="md-icon-button md-accent" aria-label="Favorite" ng-click="toggleaccordion(question)" ng-if="!question.accordionOpen">
            <md-icon md-svg-icon="images/add.svg"></md-icon>
        </md-button>
        <md-button class="md-icon-button md-accent" aria-label="Favorite" ng-click="toggleaccordion(question)" ng-if="question.accordionOpen">
            <md-icon md-svg-icon="images/minus.svg"></md-icon>
        </md-button>
    </div>
<!-- In ng-show use a variable which will make sure that every object will get it's own toggle status field -->
    <div class="accordioncontent" ng-show="question.accordionOpen">
        <p>{{question.a}}</p>
    </div>

</div>

使用ng repeat创建的所有手风琴都依赖于一个变量，即accordionOpen。创建一个布尔标志数组，并将其放入问题数组中，以便每个手风琴都有自己的标志。

当您调用

$scope.accordiopen=$范围：手风琴笔作用域是所有ngRepeat作用域的父级。它们继承了
accordiopen
值

    <div class="accordionheader" layout="row" layout-align="space-between center">
        <h3>{{question.q}}</h3>

        <md-button class="md-icon-button md-accent" aria-label="Favorite" ng-click="toggleaccordion(question)" ng-if="!question.accordionOpen">
            <md-icon md-svg-icon="images/add.svg"></md-icon>
        </md-button>
        <md-button class="md-icon-button md-accent" aria-label="Favorite" ng-click="toggleaccordion(question)" ng-if="question.accordionOpen">
            <md-icon md-svg-icon="images/minus.svg"></md-icon>
        </md-button>
    </div>
<!-- In ng-show use a variable which will make sure that every object will get it's own toggle status field -->
    <div class="accordioncontent" ng-show="question.accordionOpen">
        <p>{{question.a}}</p>
    </div>

</div>

可能有更多的解决方案-在ngClick中设置
accordiopen=true
，而不是调用控制器函数：EDIT:注意：这可能不起作用，因为md按钮ng if使用自己的作用域。坚持使用其他答案或第二种解决方案所建议的某种模型对象总是更好的

    <div class="accordionheader" layout="row" layout-align="space-between center">
        <h3>{{question.q}}</h3>

        <md-button class="md-icon-button md-accent" aria-label="Favorite" ng-click="toggleaccordion(question)" ng-if="!question.accordionOpen">
            <md-icon md-svg-icon="images/add.svg"></md-icon>
        </md-button>
        <md-button class="md-icon-button md-accent" aria-label="Favorite" ng-click="toggleaccordion(question)" ng-if="question.accordionOpen">
            <md-icon md-svg-icon="images/minus.svg"></md-icon>
        </md-button>
    </div>
<!-- In ng-show use a variable which will make sure that every object will get it's own toggle status field -->
    <div class="accordioncontent" ng-show="question.accordionOpen">
        <p>{{question.a}}</p>
    </div>

</div>

html

    <div class="accordionheader" layout="row" layout-align="space-between center">
        <h3>{{question.q}}</h3>

        <md-button class="md-icon-button md-accent" aria-label="Favorite" ng-click="toggleaccordion(question)" ng-if="!question.accordionOpen">
            <md-icon md-svg-icon="images/add.svg"></md-icon>
        </md-button>
        <md-button class="md-icon-button md-accent" aria-label="Favorite" ng-click="toggleaccordion(question)" ng-if="question.accordionOpen">
            <md-icon md-svg-icon="images/minus.svg"></md-icon>
        </md-button>
    </div>
<!-- In ng-show use a variable which will make sure that every object will get it's own toggle status field -->
    <div class="accordioncontent" ng-show="question.accordionOpen">
        <p>{{question.a}}</p>
    </div>

</div>


{{问题a}}

    <div class="accordionheader" layout="row" layout-align="space-between center">
        <h3>{{question.q}}</h3>

        <md-button class="md-icon-button md-accent" aria-label="Favorite" ng-click="toggleaccordion(question)" ng-if="!question.accordionOpen">
            <md-icon md-svg-icon="images/add.svg"></md-icon>
        </md-button>
        <md-button class="md-icon-button md-accent" aria-label="Favorite" ng-click="toggleaccordion(question)" ng-if="question.accordionOpen">
            <md-icon md-svg-icon="images/minus.svg"></md-icon>
        </md-button>
    </div>
<!-- In ng-show use a variable which will make sure that every object will get it's own toggle status field -->
    <div class="accordioncontent" ng-show="question.accordionOpen">
        <p>{{question.a}}</p>
    </div>

</div>


阅读有关作用域的更多信息：
您正在使用作用域中的单个变量切换accordian集合，因此所有accordian都会切换单个变量的更改

    <div class="accordionheader" layout="row" layout-align="space-between center">
        <h3>{{question.q}}</h3>

        <md-button class="md-icon-button md-accent" aria-label="Favorite" ng-click="toggleaccordion(question)" ng-if="!question.accordionOpen">
            <md-icon md-svg-icon="images/add.svg"></md-icon>
        </md-button>
        <md-button class="md-icon-button md-accent" aria-label="Favorite" ng-click="toggleaccordion(question)" ng-if="question.accordionOpen">
            <md-icon md-svg-icon="images/minus.svg"></md-icon>
        </md-button>
    </div>
<!-- In ng-show use a variable which will make sure that every object will get it's own toggle status field -->
    <div class="accordioncontent" ng-show="question.accordionOpen">
        <p>{{question.a}}</p>
    </div>

</div>

为了避免这种情况，每个手风琴手都应该有自己的一套切换标志。为了实现这一点，将标志与记录本身（在您的例子中是问题对象）保持在一起

    <div class="accordionheader" layout="row" layout-align="space-between center">
        <h3>{{question.q}}</h3>

        <md-button class="md-icon-button md-accent" aria-label="Favorite" ng-click="toggleaccordion(question)" ng-if="!question.accordionOpen">
            <md-icon md-svg-icon="images/add.svg"></md-icon>
        </md-button>
        <md-button class="md-icon-button md-accent" aria-label="Favorite" ng-click="toggleaccordion(question)" ng-if="question.accordionOpen">
            <md-icon md-svg-icon="images/minus.svg"></md-icon>
        </md-button>
    </div>
<!-- In ng-show use a variable which will make sure that every object will get it's own toggle status field -->
    <div class="accordioncontent" ng-show="question.accordionOpen">
        <p>{{question.a}}</p>
    </div>

</div>

@艾玛：太好了。我只是注意到第一个解决方案不起作用，因为ngIf请求另一个作用域。