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=[];

现在，您可以从$scope.filtered
获取已过滤的列表

过滤后获取$ index

1 个答案: