过滤后获取$ index

Question

我有一个小图库,有一个搜索框,当用户点击图像时,它会打开一个带有相同图像的灯箱.

基本上我将$ 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);
}

问题是在用户过滤结果(搜索输入)之后,点击仍然保持列表中的索引而没有过滤器使得灯箱打开错误的图像.有谁知道如何解决这个问题？

谢谢

Answer 1

传递对象而不是索引

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

过滤器显示两个结果.

如果单击则$ index value将成为当前视图的索引

但是你的清单仍然有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=[];

现在你可以从中获取yor过滤列表 $scope.filtered