Question

如何通过单击上一个按钮单击下一个按钮和上一个按钮来转到下一个项目？

重复以显示数据库中的数据：

idSelectedShipment是选定的div或货件ID

<div ng-repeat="shipment in shipments | orderBy:predicate:reverse">
  <div  ng-click="show_shipment($index,shipment.shipment_id)" ng-class="{selected_trip: shipment.shipment_id == idSelectedShipment}">
     <div> From {{shipment.from_location}}</div>
  </div>
</div>

下一个和上一个按钮：

<a class="" ng-click="next($event)"  href="#">next</a>
<a class="" ng-click="previous($event)"  href="#">previous</a>

我在这部分遇到了麻烦。下一个按钮和前一个按钮在ng-repeat之外，我似乎无法通过点击索引。

 $scope.next= function(index){                    
           [index + 1]
       };
 $scope.previous= function(index){                    
           [index - 1]
       };

Answer 1

看起来您的目标是在＆＃34;当前＆＃34;上呈现selected_trip课程。重复元素，你的后退/下一个按钮会改变这个吗？

根据您目前所拥有的内容，您需要在next和back函数中执行的操作相应地更改idSelectedShipment的值，但我认为可能不是最好的前进方式。

棘手的部分是您的基础数据结构shipments是为视图排序的。您的控制器和ngRepeat区域之外的范围不会意识到这一点。出于这个原因，你无法真正有效地使用$index。

我建议在控制器中对数组进行预排序，然后跟踪当前的索引位置。您的代码可能如下所示：

function MyController ($scope, $filter) {
  $scope.sortedShipments = $filter('orderBy')($scope.shipments, 'predicate', true);
  $scope.currentShipment = 0;

  $scope.back = function () {
    if ($scope.currentShipment > 0) {
     $scope.currentShipment--;
    }
  };

  $scope.next = function () {
    if ($scope.currentShipment < $scope.sortedShipments.length - 1) {
     $scope.currentShipment++;
    }
  };
}

然后将您的HTML更改为...

<div ng-repeat="shipment in sortedShipments">
  <div  ng-click="foo()" ng-class="{selected_trip: $index === currentShipment}">
    <div> From {{shipment.from_location}}</div>
  </div>
</div>

通过单击ng-repeat AngularJS外部的按钮移动到下一个和上一个项目

1 个答案: