Question

我正在尝试使用角度js和角度材料制作手风琴。问题是，当我使用ng-repeat时，单击按钮时阵列中的所有手风琴都会打开。我只想打开我点击的那个。我是如何实现这一目标的？我试过谷歌，但我找不到我到底想要的东西

这是我的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>

我的js

 $scope.accordionOpen = false;


$scope.toggleaccordion = function () {
    $scope.accordionOpen = !$scope.accordionOpen;
    console.log($scope.accordionOpen)
}

谢谢！

Answer 1

您需要使用阵列跟踪每个手风琴的状态。这意味着accordionOpen应该是一个数组，toggleaccordion应该是这样的：

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

最后，您应该使用$index内的角度提供的ng-repeat变量调用该函数：

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

Answer 2

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

Answer 3

当您调用$scope.accordionOpen = !$scope.accordionOpen;时，范围是所有ngRepeat范围的父级。它们继承了accordionOpen值。

可能有更多解决方案 - 在ngClick中设置accordionOpen = true而不是调用控制器功能：编辑： 注意：这可能不起作用，因为 ~~md-button~~ ng-if使用它自己的范围。坚持某种模型对象总是更好，其他答案或第二种解决方案建议。

<md-button 
    class="md-icon-button md-accent" 
    aria-label="Favorite" 
    ng-click="accordionOpen = true"
    ng-if="!accordionOpen">
        <md-icon md-svg-icon="images/add.svg"></md-icon>
</md-button>

或向问题本身添加属性

js：

$scope.toggleaccordion = function (question) {
    question.$accordionOpen = !question.$accordionOpen;       
}

HTML

<md-button ng-click="toggleaccordion(question)" ng-if="!question.$accordionOpen">
     <md-icon md-svg-icon="images/add.svg"></md-icon>
</md-button>

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

详细了解范围：https://docs.angularjs.org/guide/scope

Answer 4

你在范围内使用一个变量来切换一个手风琴的集合，因为所有的手风琴都会切换单个变种的变化。

为了避免它，每个手风琴都应该拥有它自己的一组切换标志。要实现它，请保持标志与记录本身（在你的情况下是问题对象）

    <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>

在你的js中使用这样的

$scope.questions.forEach(function(question){
    question.accordionOpen = false ;
});


$scope.toggleaccordion = function (question) {
    question.accordionOpen = !question.accordionOpen;
}

Ng-click / ng-repeat问题

4 个答案: