在过滤后获取$index

Question

在过滤后获取$index

3

我有一个小的图库，其中包含一个搜索框，用户单击图像时会打开一个带有相同图像的灯箱。

基本上，我将$index传递给一个函数，该函数在$scope.list[lb.index]中打开该项。

我的代码：

HTML
<input type="text" ng-model="query.name" />
<ul class="list" ng-show="list.length>0">
    <li ng-repeat="item in list | filter:query">
        <a class="img" ng-style="{'background-image':'url(/uploads/<%item.image%>)'}" ng-click="openLB($index)"></a>
    </li>
</ul>
<div class="lightbox" ng-if="lb.show">
    <a class="prev" ng-show="list.length>1" ng-click="changeItemLB(lb.index, 'prev')"></a>
    <a class="next" ng-show="list.length>1" ng-click="changeItemLB(lb.index, 'next')"></a>
    <div class="holder">
        <img ng-if="list[lb.index].image.length" ng-src="/uploads/<%list[lb.index].image%>" />
    </div>
</div>

Angular
$scope.openLB = function(index) {

    $scope.lb.show = true;
    $scope.lb.index = index;

};
$scope.changeItemLB = function(index, action) {

    var tot = $scope.list.length-1,
        goto = 0;

    if(action=='prev') goto = index==0 ? tot : index-1; 
    if(action=='next') goto = index==tot ? 0 : index+1; 

    $scope.openLB(goto);
}

问题在于用户筛选结果后（搜索输入），单击仍然保留列表中的索引，而没有筛选器，这使得灯箱打开错误的图像。有人知道如何解决吗？

谢谢。

- Kup

4

我过去解决这个问题的方法是将实际对象传递给控制器函数，并使用indexOf在列表中找到其索引。我不确定这是否接近最佳实践，但对我有用。 - wpercy

好的，我会尝试一下，谢谢。 - Kup

传递对象。通常情况下不建议传递 $index（您正在体验的原因）。 - tsiorn

我传递$index是因为灯箱具有“上一个”和“下一个”功能，所以我认为传递$index更容易。 - Kup

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Anik Islam Abhi · Accepted Answer

使用对象而不是索引

假设你的列表中有5个项目

筛选器显示两个结果。

如果你点击，$index的值将是你当前视图的索引

但是你的列表仍然有5项。

试试这样做

<a class="img" ng-style="{'background-image':'url(/uploads/<%item.image%>)'}" ng-click="openLB(item)"></a>

控制器

$scope.openLB = function(item) {

    var index = $scope.list.indexOf(item);
    $scope.lb.show = true;
    $scope.lb.index = index;

};

编辑

如何获取过滤结果

尝试像这样

视图

<li ng-repeat="item in filtered= (list | filter:query)">

控制器

$scope.filtered=[];

现在，您可以从$scope.filtered中获取您筛选后的列表。