AngularJS fadein s'applique au premier élément

Question

J'ai le modèle suivant avec ng repeat et list items. J'essaie de garder un élément ouvert par moment et de le faire disparaître lorsque je clique dessus. À l'heure actuelle, seul le premier élément de la liste apparaît, même si l'identifiant descHelp est utilisé pour tous les éléments. Des idées?

modèle

:

<div data-ng-repeat="parts in data track by $index"> 
    <li id="title" ng-click='setItem($index);'> 
    <div class="hblinks" ng-click="showDetails = ! showDetails; " > 
     <span class="sb-text-title">the title</span> 
    </div> 
    <div id ="descHelp" ng-show="showDetails && $index == itemIndex"> 

dans la directive:

$scope.setItem=function(item) { 
    $scope.itemIndex=item; 
    var target = $element.find('#descHelp'); 
    target.fadeIn(600); 
} 

Merci!

Answer 1

$element.find('#descHelp') ne retournera que le premier élément avec cet ID, et pas tous alors. Vous devez utiliser des classes, les ID ne doivent être utilisés qu'une seule fois.

Vous pouvez utiliser ng-if au lieu de ng-show pour forcer qu'une seule div est présente dans le DOM avec cet ID en tant que workarround, mais je ne recommande vraiment pas.

Mieux construire un identifiant unique en utilisant l'objet $ index comme id = "descHelp - {{$ index}}"

Answer 2

Donnez-id unique en utilisant $ index:

<div data-ng-repeat="parts in data track by $index"> 
    <li id="title" ng-click='setItem($index);'> 
    <div class="hblinks" ng-click="showDetails = ! showDetails; " > 
     <span class="sb-text-title">the title</span> 
    </div> 
    <div id ="descHelp_{{$index}}" ng-show="showDetails && $index == itemIndex"> 

et le transmettre au contrôleur

$scope.setItem=function(item, index) { 
    $scope.itemIndex=item; 
    var target = $element.find('#descHelp_' + index); 
    target.fadeIn(600); 
}