Question

我正在努力确保每次创建新崩溃时，它只会打开所选择的那个。现在它只是在点击并全部同时打开时全部打开

<div ng-repeat = "i in ticket_array">
<div ng-repeat="j in getNumber(i) track by $index">
div class="panel-group" ng-click="expand()">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" >Collapsible panel</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <div class="panel-body">Panel Body</div>
      <div class="panel-footer">Panel Footer</div>
    </div>
  </div>
</div>

$scope.expand = function(){
       $(".collapse").collapse('toggle');
    };  
$scope.getNumber = function(num) {
    console.log(num);
    return new Array(parseInt(num.quantity));   
    };

它创造了一个新的崩溃，但我不知道如何确保它只打开所选择的。

我尝试使用索引但是没有用，因为我的数组包含两个具有相同索引的对象

这是我的阵列 [{“type”：“men junior”，“quantity”：“3”}，{“type”：“men senior”，“quantity”：“3”}]

Answer 1

使用纯J将HTML行为更改为角度项目绝不是一个好主意。

请查看此项目，了解崩溃的角度实现：http://embed.plnkr.co/tcTZlA/

我们的想法是拥有一个存储布尔值的变量来激活你的accordeon菜单。

在你的情况下;我用以下代码更改了您的代码：

<div ng-repeat = "i in ticket_array">
<div ng-repeat="j in getNumber(i) track by $index">
<div class="panel-group" ng-click="j.active = !j.active" ng-class="{'expandcollapse-heading-collapsed': j.active, 'expandcollapse-heading-expanded': !j.active}"> // CODE EDITED HERE WITH A NEW VARIABLE
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" >Collapsible panel</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <div class="panel-body">Panel Body</div>
      <div class="panel-footer">Panel Footer</div>
    </div>
  </div>
</div>

当然为过渡添加了一些CSS：

.expandcollapse-item {
  overflow: hidden;
  border-top:1px solid blue;
}

.expandcollapse-heading-collapsed {
  cursor: pointer;
  padding: 15px 20px;
  position: relative;
  z-index: 100000000;
  color: black; 
  background-color: white;

}

.expandcollapse-item:first-of-type {
  border-top:0px;
}


.expandcollapse-heading-collapsed h4{
  font-size: 16px;
  font-weight: normal;
  margin:0px;
}

Answer 2

因此，您可以使用$ event添加目标并指定内部折叠类。 $ event将跟踪在javascript中调用它的事件。并且您可以使用此事件来处理函数中的操作。

 <div ng-repeat = "i in ticket_array">
    <div ng-repeat="j in getNumber(i) track by $index">
    <div class="panel-group" ng-click="expand($event)">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" >Collapsible panel</a>
          </h4>
        </div>
        <div id="collapse1" class="panel-collapse collapse">
          <div class="panel-body">Panel Body</div>
          <div class="panel-footer">Panel Footer</div>
        </div>
      </div>
    </div>
    $scope.expand = function($event){
           $($event.target).find('.collapse').collapse('toggle');
        };

更新解决方案：

$scope.expand = function($event){
   if($($event.target).find('.collapse').hasClass('in')){
        $($event.target).find('.collapse').removeClass('in')
   }else{
        $($event.target).find('.collapse').addClass('in')
   }
};

ng-repeat中的bootstrap崩溃

2 个答案: