Question

我是AngularJs的新手。我有一个对象列表，我绑定到范围对象，并使用ul and li标记在视图中呈现，如下所示：

   <ul class="pagination">
    <li class="disabled"><a href="#">&laquo;</a></li>
    <li data-ng-repeat="index in itemArray"><a href="#">{{$index+1}}</a></li>
    <li class="disabled"><a href="#">&raquo;</a></li>
   </ul>

itemArray由控制器传递并使用$scope绑定。 itemArray是多维数组中的子数组，其中包含具有固定数量项的数组。

如何在点击<a href=""标签时获取子数组并从mainArray中获取相应的子数组？

Answer 1

这是对您提出的问题的回应，其中数组已修复且已设置。其他场景（例如需要从服务器检索数据的场景）将需要更复杂的解决方案。

给定一个看起来像

的数组

$scope.mainArray = [[1, 2, 3, 4, 5], [6, 7, 8, 9, 10], [11, 12, 13, 14, 15]]
$scope.itemArray = $scope.mainArray[0]; // init subarray with first set of values

设置$watch以根据是否在主阵列的开头或结尾找到子集数组的索引来启用或禁用prev / next按钮

$scope.$watch(function(){
  return $scope.mainArray.indexOf($scope.itemArray);
}, function(idx){
  $scope.showPrev = (idx === 0) ? false : true;
  $scope.showNext = (idx === $scope.mainArray.length - 1) ? false : true;
});

其中按钮使用ng-show和基于主数组中子集数组索引的相应值：

<li ng-show="showPrev"><a>...</a></li>
<li ng-show="showNext"><a>...</a></li>

上一个和下一个按钮有自己的作用域函数，它根据索引的增量或减量设置子数组

$scope.prev = function(arr){
  $scope.itemArray = $scope.mainArray[$scope.mainArray.indexOf(arr) - 1];
};

$scope.next = function(arr){
  $scope.itemArray = $scope.mainArray[$scope.mainArray.indexOf(arr) + 1];
};

按钮将当前子数组作为参数传递：

<a ng-click="prev(itemArray)">&laquo;</a>
<a ng-click="next(itemArray)">&raquo;</a>

Demo

用angularJs分页

1 个答案: