Question

我有以下带有ng重复和列表项的模板。我试图让每个项目保持打开状态，并在点击时将其淡入。现在只有第一个列表项淡入，即使descHelp id用于所有items.Any想法？

模板：

<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')只返回带有该id的第一个元素，而不是全部返回。你应该使用类，id只能使用一次。

您可以使用ng-if代替ng-show强制DOM中只有一个div存在，并将该ID作为工作范围，但我真的不推荐。

使用$ index对象（例如id =＆＃34; descHelp - {{$ index}}＆＃34;

更好地构建唯一ID

Answer 2

使用$ index：

提供唯一ID

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

AngularJS fadein适用于第一个元素

2 个答案: