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

Question

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

0

У меня есть следующий шаблон с элементами повторения и списком 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 );
}

Спасибо!

Kratos 20 июль 2016, в 19:32

Источник

0

Вы не можете иметь несколько элементов с одинаковым идентификатором, используйте вместо этого класс.
Cameron637 20 июль 2016, в 16:57

Теги:

javascript

html

angularjs

angularjs-directive

fadein

2 ответа

Ещё вопросы

Вы не можете иметь несколько элементов с одинаковым идентификатором, используйте вместо этого класс.

alex030293 · Answer 1 · 2016-07-20T15-51-00.000Z

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

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

Лучше построить уникальный идентификатор с помощью объекта $ index, такого как id = "descHelp- {{$ index}}"

Arun Ghosh · Answer 2 · 2016-07-20T15-04-00.000Z

Дайте уникальный идентификатор, используя $ 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">

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

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

Спасибо за это, это работает большую часть времени, но не всегда. Например, если я разверну-сверну-разверну тот же элемент, во втором раскрытии он не исчезнет.