Angularjs angular ui引导手风琴如何实现自定义行为：默认全部关闭，单击一个手风琴组标题时，打开所有其他标题_Angularjs_Accordion_Angular Ui Bootstrap

Angularjs angular ui引导手风琴如何实现自定义行为：默认全部关闭，单击一个手风琴组标题时，打开所有其他标题

angularjs

Angularjs angular ui引导手风琴如何实现自定义行为：默认全部关闭，单击一个手风琴组标题时，打开所有其他标题,angularjs,accordion,angular-ui-bootstrap,Angularjs,Accordion,Angular Ui Bootstrap,我正在使用ui引导手风琴。我的手风琴里面有一个手风琴在第一个手风琴“类别”下，我有另一个手风琴，有3个手风琴组。默认情况下，它们是关闭的。我想这样做：当你点击一个手风琴组标题（比如“水果”）时，如果所有的手风琴组都关闭了，那么它会将它们全部打开。。。但如果有任何组是打开的（比如，当用户单击时，如果“水果”、“肉”和“蔬菜”中的任何一个是打开的），那么当您单击时，它将切换单击的手风琴组。您可以在此处查看plunker：我的html和angular代码如下： <!DOCTYPE html

我正在使用ui引导手风琴。我的手风琴里面有一个手风琴

在第一个手风琴“类别”下，我有另一个手风琴，有3个手风琴组。默认情况下，它们是关闭的。我想这样做：当你点击一个手风琴组标题（比如“水果”）时，如果所有的手风琴组都关闭了，那么它会将它们全部打开。。。但如果有任何组是打开的（比如，当用户单击时，如果“水果”、“肉”和“蔬菜”中的任何一个是打开的），那么当您单击时，它将切换单击的手风琴组。您可以在此处查看plunker：

我的html和angular代码如下：

<!DOCTYPE html>
<html ng-app="plunker">

  <body ng-controller="AccordionDemoCtrl">
    <accordion >
      <accordion-group>
        <accordion-heading> Category</accordion-heading>

        <accordion ng-repeat="(category, items) in categories" close-others="oneAtATime" is-open="true">
          <accordion-group >
            <accordion-heading ><div>{{category}}</div></accordion-heading>

            <div ng-repeat="item in items.data">{{item}}</div>
          </accordion-group>
        </accordion>

      </accordion-group>
    </accordion>

  </body>

</html>


angular.module('plunker', ['ui.bootstrap']);
function AccordionDemoCtrl($scope) {
  $scope.categories = {
    fruit: {
      data: {
        apple: 3,
        orange: 5,
       lemon: 6
      },
      toggled: false

    },
    vegetable: {
      data: {
         lettuce: 1,
        broccoli: 5, 
        spinach: 4
      },
      toggled: false

    },
    meat: {
      data: {
        chicken: 3,
        beef: 6,
        lamb: 8
      },
      toggled: false

    }
  };
}


我在accordion中使用了“is open”属性，我试图引用$parent，而不是产生我想要的行为
 WABBIT0111
您可能需要使用属性is open=ctrlVar

这样，您就可以通过ng click=action来设置ctrlVar状态，然后将其切换回原始位置。
WABBIT0111
您可能需要使用属性is open=ctrlVar

通过这种方式，您可以使用ng click=操作设置它，以更改ctrlVar状态
，然后将其切换回原始位置。
如bobleujr所述打开
应该可以工作。但是代码有点复杂，我不确定是否有更简单的解决方案
问题是，在切换单击的手风琴后，将调用我要添加“toggleAll”检查的ng click。
因此，我必须跟踪之前的手风琴状态，以确保我们必须切换所有手风琴。我通过循环所有accodions州来计算它是否打开
然后我可以稍后检查previousCount==0
和currentCount==1
我们是否需要打开所有
我不喜欢为行为做两个for循环，但我认为这是唯一的方法
如果它不使用ng切换状态，请单击
，这样做会更容易。但我不知道怎么做。我曾尝试禁用手风琴指令的is open
切换，但不起作用
如果使用accordion指令，则可以在切换之前添加检查。但这可能没那么容易
请看一下下面的演示或更新版本中的演示

//代码在这里
angular.module（'plunker'，['ui.bootstrap']））
.控制器（“AccordionDemoCtrl”，AccordionDemoCtrl）；
函数AccordionDemoCtrl（$scope）{
var-prevOpenCount=0；
$scope.toggle=函数（索引）{
var openCount=0，
openAll=false；
//检查打开了多少个手风琴
对于（变量i=0；i<$scope.openState.length；i++）{
if（$scope.openState[i]==true）{
openCount++；
}
}
如果（openCount==1&&prevOpenCount==0）{//全部打开
对于（变量i=0；i<$scope.openState.length；i++）{
$scope.openState[i]=true；
}
}
//log（索引$scope.openState、openCount、prevOpenCount）；
prevOpenCount=openCount；
};
$scope.categories={
水果：{
数据：{
苹果：3，
橙色：5，
柠檬：6
},
切换：false
},
蔬菜：{
数据：{
生菜：1，
花椰菜：5，
菠菜：4
},
切换：false
},
肉类：{
数据：{
鸡肉：3，
牛肉：6，
羔羊：8只
},
切换：false
}
};
$scope.openState=新数组（Object.keys（$scope.categories）.length）；
}

类别
{{category}}
{{item}}
正如bobleujr所说，
是开放的
应该可以工作。但是代码有点复杂，我不确定是否有更简单的解决方案
问题是，在切换单击的手风琴后，将调用我要添加“toggleAll”检查的ng click。
因此，我必须跟踪之前的手风琴状态，以确保我们必须切换所有手风琴。我通过循环所有accodions州来计算它是否打开
然后我可以稍后检查previousCount==0
和currentCount==1
我们是否需要打开所有
我不喜欢为行为做两个for循环，但我认为这是唯一的方法
如果它不使用ng切换状态，请单击
，这样做会更容易。但我不知道怎么做。我曾尝试禁用手风琴指令的is open
切换，但不起作用
如果使用accordion指令，则可以在切换之前添加检查。但这可能没那么容易
请看一下下面的演示或更新版本中的演示

//代码在这里
angular.module（'plunker'，['ui.bootstrap']））
.控制器（“AccordionDemoCtrl”，AccordionDemoCtrl）；
函数AccordionDemoCtrl（$scope）{
var-prevOpenCount=0；
$scope.toggle=函数（索引）{
var openCount=0，
openAll=false；
//检查打开了多少个手风琴
对于（变量i=0；i<$scope.openState.length；i++）{
if（$scope.openState[i]==true）{
openCount++；
}
}
如果（openCount==1&&prevOpenCount==0）{//全部打开
对于（变量i=0；i<$scope.openState.length；i++）{
$scope.openState[i]=true；
}
}
//log（索引$scope.openState、openCount、prevOpenCount）；
prevOpenCount=openCount；
};
$scope.categories={
水果：{
数据：{