使用ng-repeat時重複的元素ID

我正在創建一個可以顯示多個可摺疊列表的網站（例如類別&子類別），到目前爲止我已經設法使用ng-repeat創建動態div，但是我的問題是切換坍方。在第二類中，當試圖切換顯示/隱藏列表時，它會切換第一個div上的列表。使用ng-repeat時重複的元素ID

HTML：

<div class="col-lg-9 col-sm-3 col-xs-12"> 
     <div ng-repeat="cat in categories"> 
      <div class="row"> 
       <div class="col-lg-2 col-sm-3 col-xs-3"> 
        <img src="http://placehold.it/75x75" class="img-circle center-block img-responsive" height="75" width="75"> 
       </div> 
      <div class="col-lg-9 col-xs-8"> 
       <b> 
        {{cat}} 
       </b> 
      </div> 
     </div> 
     <hr> 

     <div class="row" ng-repeat="item in items "> 
      <div class="col-lg-12 col-xs-12"> 
       <p ng-click="toggleCollapse($index + 1)"><i class="fa fa-fw fa-arrow-circle-right"></i> 
        {{item}} 
       </p> 
       <div id="collapse{{ $index + 1}}" class="collapse collapse-checklist"> 
        <div ng-repeat="c in checklist"> 
         <p>Lorem Ipsum</p> 
        </div>

的JavaScript：

$scope.toggleCollapse = function (ind) { 
    var collapseInd = ("#collapse" + ind); 
    $(collapseInd).collapse('toggle'); 
};

現在，我已經確定了問題NG-重複創建具有相同的ID（崩潰我）股利這將導致第二個div上的函數會切換第一個div上的列表。

我的功能在第一個div div中運行良好，但在所有其他div上，它仍然在第一個div上切換列表。任何人都可以幫我修復我的功能，這樣它會切換其各自的div列表？

來源

2016-04-18 user3337279

你有沒有檢查http://stackoverflow.com/questions/31238321/expand-and-collapse-view-functionality-in-angularjs – silentprogrammer

爲什麼不使用ng-hide/ng-show而不是jquery？我不會推薦在一個角度的應用程序中使用jquery（而且它絕對沒有必要）。您可以在點擊時隱藏/顯示元素，而不會使用角度很麻煩。 –

^這。謝謝。它在我第一次嘗試時沒有奏效，但我現在可以使用angularjs切換內容。 – user3337279

如所建議的通過鐸-蓋爾蓋伊。

使用角度法。

<p ng-click="showChecklist = !showChecklist"><i class="fa fa-fw fa-arrow-circle-right"></i> 
         {{item}} 
        </p> 
       <div ng-show="showChecklist"> 
        <div ng-repeat="c in checklist"> 
         <p>Lorem Ipsum</p> 
        </div>

謝謝！

來源

2016-04-18 07:19:42 user3337279

試試這個：你可以通過在下一個div元素上調用collapse來避免使用ID。請參見下面的代碼

$scope.toggleCollapse = function (ind) { 
    $(this).next('div.collapse.collapse-checklist').collapse('toggle'); 
};

來源

2016-04-18 05:53:36

如果你有使用ng-repeat一些重複的ID，你應該使用這樣的：

<tr ng-repeat="(key, value) in data"> 
    <td> {{key}} </td> <td> {{ value }} </td> 
</tr>

所以，現在你會看到key會的每次改變。並製作一些自定義ID。

<tr ng-repeat="(key, value) in data"> 
    <td id="myCustomId_{{key}}"> {{key}} </td> 
    <td> {{ value }} </td> 
</tr>

您將得到一個唯一的ID。

此方法列在文檔：http://docs.angularjs.org/api/ng.directive:ngRepeat

來源

2016-04-18 06:23:25 hmd

使用ng-repeat時重複的元素ID

回答

相關問題