Question

目标：点击下一个/上一个按钮后，标签会更改为当前幻灯片的下一个/上一个类别。 Category Slider Wireframe我希望实现的目标。

背景： 我之前尝试过此'Obtain Next/Previous Value from Object'。但是我遇到了问题，我必须在我的ng-repeat中进行此操作，即使我想要的数据已生成，但它无法使用bxSlider插件（我无法复制箭头）。因此，我需要在ng-repeat之外维护这些箭头和标签。

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

我天真地尝试ng-click="activeCat = activeCat + 1"，但显然只是在类别的末尾添加了。非常感谢任何帮助：）

HTML

        <!-- 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

在ng-click调用函数上，在该函数中执行增量。

喜欢这个

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

并在controllerjs中

    $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;
              }
     });

    }

Answer 2

您可以将每个对象数据存储在一个数组中，并根据他们按下的按钮使数组索引递增或递减。

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语句将确保当到达数组的末尾时，该项将返回到开头。下一个和上一个值现在彼此同步，因此按下一个按钮，下一个和上一个标签都会更新，反之亦然。

再次感谢您的帮助。

AngularJS - 附加到增量/减量范围的变量

2 个答案: