Question

我可以让它在没有重复的情况下工作，但是当我有元素列表时 - 打开不起作用。
1.我应该能够一次打开一个面板（有时会打开所有面板）
2. is-Open应在面板打开时获得值true 3.如果用户在打开面板后单击面板内容列表，我应该能够获取值（类似于面板上的is-Open）。

HTML

<body ng-app="myApp">
        <div class="col-sm-6" ng-controller="Controller">
            <div class="column-nav">
                <uib-accordion close-others="oneAtATime">
                    <uib-accordion-group  ng-repeat="group in groups" ng-scroll="group in groups" is-open="$parent.isOpen">
                        <uib-accordion-heading ng-model="checkTitle">
                            {{group.title}}
                        </uib-accordion-heading>
                            <a>{{group.content}}</a>
                    </uib-accordion-group>
                </uib-accordion>
            </div>
            <div>
                Panel Header Open: {{isOpen}} <br>
                Panel oneAtATime: {{oneAtATime}}
            </div>
        </div>  
    </body>

app.js

myApp.controller('Controller', ['$scope', function($scope) {

    $scope.isOpen = false;
    $scope.oneAtATime = true;

    // Data 
     $scope.groups = [
    {
      title: "Dynamic Group Header - 1",
      content: "Content - 1"
    },
    {
      title: "Dynamic Group Header - 2",
      content: "Content - 2"
    }
  ];

  //log
  $scope.$watch('isOpen', function(){
        console.log(" watch isOpen:" +$scope.isOpen);
   }, true);

  }]);

Plunker

感谢您的帮助和建议。

Answer 1

这只是其他答案的略微变化。（我仍然不确定你的第三个要求，或者至少你的意思。）

我们改变了这个：

...is-open="$parent.isOpen">

进入此（无需更改任何数据）：

...is-open="group.isOpen" ng-click="updateOpenStatus()">

将功能添加到控制器，以设置“全局”打开状态。（要求2）

$scope.updateOpenStatus = function(){
  $scope.isOpen = $scope.groups.some(function(item){
    return item.isOpen;
  });
}

http://jsfiddle.net/jeffbarclay/xxdrf87q/

Answer 2

为每支手风琴提供独特的ng模型，然后它将适合您

<uib-accordion-group  ng-repeat="group in groups" ng-scroll="group in groups">
    <uib-accordion-heading ng-model="checkTitle$index">
        {{group.title}}
    </uib-accordion-heading>
    <a>{{group.content}}</a>
</uib-accordion-group>

Answer 3

试试这个：

$scope.groups = [
    {
      title: "Dynamic Group Header - 1",
      content: "Content - 1",
      isOpen: false
    },
    {
      title: "Dynamic Group Header - 2",
      content: "Content - 2"
      isOpen: false
    }

使用：

Panel Header Open: {{group.isOpen}} <br>

我假设每个组都必须包含自己的属性。

<强>更新

我在plunker上检查它，它的工作原理如下：

 $scope.groups = [
    {
      isOpen: false,
      title: "Dynamic Group Header - 1",
      content: "Content - 1"
    },
    {
      isOpen: false,
      title: "Dynamic Group Header - 2",
      content: "Content - 2"
    }

和

<uib-accordion-group  ng-repeat="group in groups" ng-scroll="group in groups" is-open="group.isOpen">

从js

中删除$ scope.isOpen

Answer 4

我知道回答这个问题的时间已经很晚了，但我有一个非常简单的解决方案，可以帮助第四位访问者

这是：

<div ng-if="$parent.isOpen" ng-cloak>

全部感谢，如果要在呈现内容后删除ng-if，以便保存一些处理，请使用::

<div ng-if="::$parent.isOpen" ng-cloak>

AngularJS手风琴是用ng重复打开检查

4 个答案: