Question

我想要实现的目标：
当用户单击下一个或上一个按钮时更改状态ID。为每个状态分配一个在数组内的id，当单击next或previous时，state id需要知道哪个是数组中的下一个或前一个id。

当前问题：
在昨天花了好几个小时后，我设法让下一个和前一个按钮工作，但不是从数组中获取状态id，而是获取数组索引号。

下面的测试显示了这个数组[＆＃34; 1＆＃34;，＆＃34; 2＆＃34;，＆＃34; 4＆＃34;]，所以如果我在状态＆＃39; 2＆＃ 39;下一页将是＆＃39; 4＆＃39;而前一个是＆＃39; 1＆＃39;而不是＆＃39; 0＆＃39; 1＆＃39; 1＆＃39; 2＆＃39;！

我真的很感激一些帮助，我不介意重写所有代码来解决这个问题！

提前感谢您的支持！

控制器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' -- //
  $scope.nextDress = function() {
    var next = parseInt(currentID) + 1 > dressArray.length ? 0 : parseInt(currentID) + 1;
    $state.go('main.rail', {id: next });
  };
  // -- If currentID = '2', The next button should display '4'--//
  $scope.previousDress = function() {
    var prev = parseInt(currentID) - 1 < 0 ? dressArray.length - 1 : parseInt(currentID) - 1;
    $state.go('main.rail', {id: prev });
  };

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>

最终更新（答案） @SarjanDesai

  var currentID = $stateParams.id;
  var bodyType = $scope.$storage.userData.bodyType.bodyType;
  var dressArray = $scope.$storage.appData.dresses;
  var removeRound = $filter('filter')(dressArray, function(value, index) {return value.bodyType == bodyType;});
  var newDressArray = [];
  angular.forEach(removeRound, function(value, key) {
    newDressArray.push(value.id);
  });
  var currentIndex = newDressArray.indexOf(currentID.toString());
  var next = (currentIndex + 1) > newDressArray.length ? newDressArray[newDressArray.length - 1] : newDressArray[currentIndex + 1];
  var prev = (currentIndex - 1) < 0 ? 0 : newDressArray[currentIndex - 1];
  if(prev === 0 || prev === undefined || prev === null){
    $scope.hidePrevButton = {
      active: true
    };
  }
  if(next === 0 || next === undefined || next === null){
    $scope.hideNextButton = {
      active: true
    };
  }
  $scope.nextDress = function() {
    $state.go('main.rail', {'id': next});
  };
  $scope.previousDress = function() {
    $state.go('main.rail', {'id': prev});
  };
  //console.log(newDressArray);
  //console.log('Next: ' + next);
  //console.log('Current: ' + currentID);
  //console.log('Previous: ' + prev);

Answer 1

查看生成按钮的HTML会很有帮助。但就我而言，我可以看到类似的东西 <button>{{dressArray[currentId].id}} </buuton> 应该在索引currentId

处显示数组值

Answer 2

以下代码的作用是获取currentID的当前索引并检查前一个按钮和下一个按钮的next或previous值的可用性。如果下一个值不可用，则设置为最后一个值，如果之前的值不可用，则设置为上一个按钮，然后将其设置为数组的第一个值。

$scope.nextDress = function() {
  var currentIndex = $scope.dressArray.indexOf(currentID.toString());
  var next = (currentIndex + 1) > $scope.dressArray.length ? $scope.dressArray[dressArray.length - 1] : $scope.dressArray[currentIndex + 1];
  $state.go('main.rail', next);
};
// -- If currentID = '2', The next button should display '4'--//
$scope.previousDress = function() {
  var currentIndex = $scope.dressArray.indexOf(currentID.toString());
  var prev = (currentIndex - 1) < 0 ? $scope.dressArray[0] : $scope.dressArray[currentIndex - 1];
  $state.go('main.rail', prev);
};

寻找演示示例：

angular.module('myApp', []).controller('myCtrl', ['$filter', '$scope',
  function($filter, $scope) {
    $scope.myclick = function() {

      var currentID = 1;
      console.log('current state : ' + currentID);

      var bodyType = 'triangle';

      var dressArray = [{
        "id": "1",
        "bodyType": "triangle"
      }, {
        "id": "2",
        "bodyType": "triangle"
      }, {
        "id": "3",
        "bodyType": "round"
      }, {
        "id": "4",
        "bodyType": "triangle"
      }];

      var removeRound = $filter('filter')(dressArray, function(value, index) {
        return value.bodyType == bodyType;
      });

      var dressArray = [];

      angular.forEach(removeRound, function(value, key) {
        dressArray.push(value.id);
      });

      console.log(dressArray);

      nextDress = function() {
        var currentIndex = dressArray.indexOf(currentID.toString());
        var next = (currentIndex + 1) > dressArray.length ? dressArray[dressArray.length - 1] : dressArray[currentIndex + 1];
        console.log('next dress : ' + next);
      };
      // -- If currentID = '2', The next button should display '4'--//
      previousDress = function() {
        var currentIndex = dressArray.indexOf(currentID.toString());
        var prev = (currentIndex - 1) < 0 ? dressArray[0] : dressArray[currentIndex - 1];
        console.log('prev dress : ' + prev);
      };
      previousDress();
      nextDress();
    }
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <button ng-click="myclick()">Button</button>
</div>

AngularJS下一个和上一个数组值

2 个答案: