ng-repeat引導程序崩潰

我試圖確保每次新建崩潰時創建它將只打開被選中的一個。現在它只是打開所有當點擊關閉所有在同一時間ng-repeat引導程序崩潰

<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)); 
    };

它創建3個新的崩潰，但我不知道如何確保它只是打開被選擇。

我已經嘗試使用索引，但沒有工作，因爲我的數組包含兩個對象具有相同指數的

這是我的數組 [{「類型」：「男小三」，「量」：「3」}，{「type」：「men senior」，「quantity」：「3」}]

來源

2017-06-13 Zachary Lordford

您可以提供的任何機會一個JS小提琴？ – ZombieChowder

您可以爲摺疊的每個div添加唯一的ID，即'collapse- $ index'。然後調用'expand（$ index）'，其中body就是'$（'＃collapse-'+ $ index）.collapse（'toggle'）;' – NTL

@NTL我嘗試使用索引，但我的數組有這樣的東西 [{「type」：「men junior」，「quantity」：「3」}]，[{「type」：「men senior」，「quantity」：「3」}] –

使用純Js將HTML行爲更改爲角度項目從來就不是一個好主意。

看一看這個項目的角度實現您的崩潰：http://embed.plnkr.co/tcTZlA/

的想法是有一個存儲布爾激活或不是你的手風琴菜單中選擇一個變量。

在你的情況;

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

來源

2017-06-13 13:52:21 aorfevre

所以在這一點，你可以使用$事件的增加目標，並指定內部瓦解我會與更改代碼類。 $事件將跟蹤事件，它在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') 
    } 
};

來源

2017-06-13 13:56:44

它沒有工作，錯誤anc崩潰根本沒有打開 –

嘗試更新解決方案 –

ng-repeat引導程序崩潰

回答

相關問題