AngularJS fadein относится к первому элементу

Question

У меня есть следующий шаблон с элементами повторения и списком ng. Я пытаюсь держать один элемент открытым в течение времени и исчезать при нажатии. В настоящий момент только первый элемент списка исчезает, хотя идентификатор descHelp используется для всех элементов. Все идеи?

шаблона:

<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"> 

в директиве:

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

Спасибо!

Answer 1

$element.find('#descHelp') вернет вам только первый элемент с этим идентификатором, а не все. Вы должны использовать классы, идентификаторы должны использоваться только один раз.

Вы можете использовать ng-if вместо ng-show, чтобы заставить только один div присутствовать в DOM с этим id в качестве рабочего стола, но я действительно рекомендую.

Лучше построить уникальный идентификатор, используя объект $ указательный как ID = "descHelp - {{$ указательным}}"

Answer 2

Дайте уникальный идентификатор, используя $ индекс:

<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"> 

И передать его в контроллер

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