AngularJS,通过动态ID获取元素?
问题描述:
我正在使用ng-repeat构建一个无序列表。我这样做,像这样:AngularJS,通过动态ID获取元素?
<li id="listItem{{$index}}" ng-repeat="slide in data" ng-click="setActive(slide.slideIndex,$event)">
<span class="listItemText">
<b>{{slide.slideIndex + 1}}. </b>{{slide.Title}}
</span>
</li>
我给每个<li>
的listItem0, listItem1, listItem2,....
动态ID等我需要得到该元素在我的控制器。我一直在尝试使用angular.element()
,但我无法为我的生活工作。
我需要该元素的原因是因为在某些事件中,我需要我的动画库(TweenLite)自动滚动到该位置。你被允许的元素传递给TweenLite的,像这样:
$scope.setActive = function(id, event)
{
$scope.currentIndex = id;
if (event) player.currentTime = $scope.data[id].time;
if ($scope.autoScroll)
{
var target = document.getElementById("listItem" + id);
TweenLite.to(slideList,0.5,{scrollTo:{y:target}});
}
}
问题是target
总是返回null
。如果我把目标放在angular.element()
里面,我会得到一个巨大的物体,并且没有提到实际的<li>
(我能找到)。
我在做什么错在这里和/或我应该以不同的方式来?谢谢。
编辑
player.addEventListener("timeupdate", function()
{
currentTime = player.currentTime;
angular.forEach($scope.data, function(value, key)
{
if (currentTime >= $scope.data[key].time && currentTime <= $scope.data[key].time + 0.3 && $scope.currentIndex != key)
{
$scope.$apply(function()
{
$scope.setActive(key);
});
}
});
});
答
你逝去的已经将事件包含元素的引用。试试这个:
TweenLite.to(slideList,0.5,{scrollTo:{y:event.target}});
我不知道事件是否携带了目标。很高兴知道。我现在的问题是我有一个提示点的视频播放器(我将这个功能添加到我原来的问题中)。当提示点被击中时,我调用'setActive()'。在那种情况下,通过'ng-click'没有点击事件,因此我为什么最初测试了'if(event)...' – Ronnie 2013-03-13 18:47:31
您确定slide.slideIndex和$ index匹配吗?尝试设置id =“listItem {{slide.slideIndex}}” – Blago 2013-03-13 18:55:07
'$ index'从0开始,'slide.slideIndex'从0开始。我有一个slideIndex的原因是当我过滤列表项时,我想要正确“1,5,8,12”等列表项旁边的数字如果我使用'$ index',他们会在过滤时显示'1,2,3,4'等 – Ronnie 2013-03-13 18:56:17