Question

我想要实现的目标：
当用户单击上一个或下一个时更改状态，每个状态都分配了一个id，并且需要在更改上一个或下一个状态之前确定哪个ID是上一个或下一个。

当前问题：
我已设法显示当前状态ID＆＃39; 1＆＃39;我已成功将所有其他ID分组到一个阵列中，但我不知道如何让下一个和上一个按钮在点击时触发正确的上一个或下一个状态。

请在下面找到我的代码，我已添加评论/注释以指出问题。

任何帮助/建议都会有所帮助！
谢谢。

控制器JS

  // -- Current Page ID, '1' -- //
  var currentID = $stateParams.id;
  // -- Body Type, 'triangle' -- //
  var bodyType = $scope.$storage.userData.bodyType.bodyType;
  // --  Dress Array, [{"id": "1", "bodyType": "triangle"},{"id": "2", "bodyType": "triangle"},{"id": "3", "bodyType": "round"},{"id": "4", "bodyType": "triangle"}] --//
  var dressArray = $scope.$storage.appData.dresses;
  // -- Remove anything that doesn't match the current body Type e.g Remove 'round' -- //
  var removeRound = $filter('filter')(dressArray, function(value, index) {return value.bodyType == bodyType;});
  // -- Dress Array -- //
  $scope.dressArray = [];
  // -- Push each filter value to Array, ["1", "2", "4"] -- //
  angular.forEach(removeRound, function(value, key) {
    $scope.dressArray.push(value.id);
  });
  // -- Console Test, ["1", "2", "4"] -- //
  console.log($scope.dressArray);
  // -- If currentID = '1', The next button should display '2' -- //
  // -- If currentID = '2', The next button should display '4'--//
  $scope.nextDress = function() {
    $state.go('main.rail', {id: idhere });
  };
  // -- If currentID = '1', The previous button should display '4' -- //
  // -- If currentID = '2', The previous button should display '1' -- //
  $scope.previousDress = function() {
    $state.go('main.rail', {id: idhere });
  };

HTML

<li class="next"><md-button ng-click="nextDress()">Next</md-button></li>
<li class="previous"><md-button ng-click="previousDress()">Previous</md-button></li>

Answer 1

检查currentId + 1是否不大于下一个项目的数组长度（如果更大，请转到第一个）并检查currentId - 1是否不小于0，如果是，转到最后一项（使其循环）：

 $scope.nextDress = function() {
    var next = parseInt(currentId) + 1 > dressArray.length ? 0 : parseInt(currentId) + 1;
    $state.go('main.rail', {id: next });
  };

  $scope.previousDress = function() {
    var prev = parseInt(currentId) - 1 < 0 ? dressArray.length - 1 : parseInt(currentId) - 1;
    $state.go('main.rail', {id: prev });
  };

Answer 2

我会将数据设置为封闭的链表，每次通过过滤器后都会运行。

var currentItem; // keep a reference of current item
var arrayToLL = function(arr){
  for (var i = 0; i < arr.length; i++) {
    var item = arr[i];
    if (i == 0) item.prev = arr[arr.length - 1];
    else item.prev = arr[i - 1];

    if (i == arr.length - 1) item.next = arr[0];
    else item.next = arr[i + 1];

    if (item.id == currentId) { // you may get currentId from $stateParams
      currentItem = item;
    }
  }
}

$scope.nextDress = function() {
  $state.go('main.rail', {id: currentItem.next.id });
};

$scope.previousDress = function() {
  $state.go('main.rail', {id: currentItem.prev.id });
};

AngularJS下一个和上一个数组值

2 个答案: