AngualrJS -附加于递增/递减范围的变量

Question

的目标:点击下一个/上一个按钮的标签更改为当前幻灯片的下一个/前一个类别。我想达到的目标的滑翔机线架。

背景：我以前尝试过这个“从对象获得下一个/前一个值”。但是，我遇到了一些问题，必须在我的ng-repeat中使用它，即使生成了我想要的数据，它也不能使用bxSlider插件(我不能复制箭头)。因此，我需要在我的ng-repeat之外维护这些箭头和标签。

下一步解决方案：我意识到，对此最好的解决方案是将其保持在ng-重复之外。为了做到这一点，我相信我必须将变量附加到将增加/减少的范围中。因此，可以查看相应的下一个/前一个按钮。

不过，我天真地尝试了ng-click="activeCat = activeCat + 1"，但这显然只是在类别的末尾添加了一些内容。任何帮助都是非常感谢的:)

        <!-- Next & Previous Buttons -->
        <div class="btn-nextprev">
            <div class="next-container">
                <a href="" class="btn btn-next" id="next" ng-click="nextCat = nextCat + 1"> 
                    {{ employees[getNextCategoryIndex($index)].category }} {{nextCat}}
                </a>
            </div>
            <div class="prev-container">
                <a href="" class="btn btn-prev" id="prev">
                    {{ employees[getPrevCategoryIndex($index)].category }} {{prevCat}}
                </a>
            </div>
        </div>
        <!-- END Next & Previous Buttons -->

控制器：

var personControllers = angular.module('personControllers', ['ngAnimate']);

//PersonSearch Controller
personControllers.controller('PersonList', ['$scope', '$http', 
function($scope, $http) {

    $http.get('../static/scripts/data2.json').
    success(function(data) {
        console.log("JSON file loaded");
        console.log(data);
        $scope.employees = data;

        $scope.activeCat = data[0].category;
        $scope.nextCat = data[0 + 1].category;

        //$scope.prevCat = data[0 - 1].category;

    }).
    error(function(){
        console.log("JSON file NOT loaded");
    });

}]);

JSON:

[
  {
    "category": "Technology",
    "shortname": "tech",
    "icon": "fa-desktop",
    "cat_id": 0,
    "cards": [
      {
        "id": "card-1",
        "name": "George Sofroniou",
        "shortname": "G_Sof",
        "age": "23",
        "company": "Pirean Ltd.",
        "role": "Graduate UI Developer"
      },
      {
        "id": "card-2",
        "name": "Steve Jobs",
        "shortname": "S_Jobs",
        "age": "56 (Died)",
        "company": "Apple Inc.",
        "role": "Former CEO"
      },
    ]
  },
  {
    "category": "Motors",
    "shortname": "mot",
    "icon": "fa-car",
    "cat_id": 1,
    "cards": [
      {
        "id": "card-1",
        "name": "Elon Musk",
        "shortname": "E_Musk",
        "age": "43",
        "company": "Tesla Motors",
        "role": "CEO"
      },
      {
        "id": "card-2",
        "name": "Henry Ford",
        "shortname": "H_Ford",
        "age": "83 (Died)",
        "company": "Ford Motor Company",
        "role": "Founder"
      }
    ]
  },
  {
    "category": "Football",
    "shortname": "foot",
    "icon": "fa-futbol-o",
    "cat_id": 2,
    "cards": [
      {
        "id": "card-1",
        "name": "Sir Alex Ferguson",
        "shortname": "A_Fer",
        "age": "73",
        "company": "N/A",
        "role": "Retired"
      },
      {
        "id": "card-2",
        "name": "Bobby Moore",
        "shortname": "B_Moor",
        "age": "51 (Died)",
        "company": "N/A",
        "role": "Footballer"
      }
    ]
  },
  {
    "category": "Law",
    "shortname": "law",
    "icon": "fa-gavel",
    "cat_id": 3,
    "cards": [
      {
        "id": "card-1",
        "name": "Harvey Specter",
        "shortname": "H_Spec",
        "age": "43",
        "company": "Pearson Specter Litt",
        "role": "Name Partner"
      },
      {
        "id": "card-2",
        "name": "Saul Goodman (James Morgan McGill)",
        "shortname": "S_Good",
        "age": "48",
        "company": "Better Call Saul",
        "role": "Criminal Defence Attorney"
      }
    ]
  }
]

Answer 1

您只需将每个对象数据存储在一个数组中，并根据它们按下的按钮来增加或减少数组索引。

var i = 0
    $scope.dataArray = [];

//sift the data into the array
$scope.next = function () {
    i++
};
$scope.prev = function () {
    i--
};

下面是一个例子：http://plnkr.co/edit/SVXhxvwJqnO8Uarjkxx2?p=preview

GSof编辑：

//Next & Previous Button Category Label
    $scope.i = 0;
    $scope.j = $scope.employees.length;
    $scope.nextCat = $scope.i + 1;
    $scope.prevCat = $scope.j - 1;

    $scope.getNext = function(){
        //console.log($scope.nextCat);
        $scope.nextCat++;
        if( $scope.nextCat >= $scope.employees.length ){
            $scope.nextCat = 0;
        }

        $scope.prevCat++;
        if( $scope.prevCat >= $scope.employees.length ){
            $scope.prevCat = 0;
        }

    };

    $scope.getPrev = function(){
        //console.log($scope.nextCat);
        $scope.prevCat--;
        if( $scope.prevCat < 0 ){
            $scope.prevCat = $scope.employees.length - 1;
        }

        $scope.nextCat--;
        if( $scope.nextCat < 0 ){
            $scope.nextCat = $scope.employees.length - 1;
        }
    };

这个if语句将确保当到达数组的末尾时，项目将返回到开头。下一个和以前的值现在是同步的，例如按next按钮，下一个和以前的标签更新，反之亦然。

再次感谢您的帮助.

Answer 2

在ng上单击call函数，在该函数中执行增量操作。

像这样

 <a href="" class="btn btn-next" id="next" ng-click="increment()">

在控制器中

    $scope.increment=function(){
       $scope.flag=false;
    angular.forEach($scope.employees,function(employe){
             if(flag){
                  $scope.nextCat = employe.category;
                  return;
              }
             if($scope.nextCat === employe.category){
                  flag=true;
              }
     });

    }