AngularJS & JSON -从上一个和下一个对象中获取值

Question

背景：I已经创建了一个AngularJS测试应用程序，它从一个JSON文件中获取数据，该文件被分成几个类别，每个类别中都有一张雇员卡，它通过ng-重复显示。然后可以使用滑块(使用bxSlider)查看这些类别。

目标： With bxSlider您可以使用自定义的Next/bxSlider按钮，我想要实现的是在下一个/前一个按钮中动态显示相关的类别名称(请参见下面的注释链接--我的级别不允许我发布图像)。

网站类别滑轨线框

例如，：视图中的当前类别是“技术”部门，前面的按钮可以显示“汽车”部门，下一个按钮可能显示“法律”部门。

据我所知，下面的代码将允许我访问类别名称‘技术’。然而，这需要动态地进行。

{{employees[0].category}}

下面我将包括所有我认为是相关的代码。

JSON文件

[
  {
    "category": "Technology",
    "shortname": "tech",
    "icon": "fa-desktop",
    "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"
      },
      {
        "id": "card-3",
        "name": "Mark Zuckerberg",
        "shortname": "M_Zuck",
        "age": "30",
        "company": "Facebook",
        "role": "CEO"
      },
      {
        "id": "card-4",
        "name": "Tim Cook",
        "shortname": "T_Cook",
        "age": "54",
        "company": "Apple Inc.",
        "role": "CEO"
      },
      {
        "id": "card-5",
        "name": "Jony Ive",
        "shortname": "J_Ive",
        "age": "48",
        "company": "Apple Inc.",
        "role": "Senior Vice President of Design"
      },
      {
        "id": "card-6",
        "name": "Marissa Mayer",
        "shortname": "M_May",
        "age": "39",
        "company": "Yahoo!",
        "role": "CEO"
      },
      {
        "id": "card-7",
        "name": "Yves Behar",
        "shortname": "Y_Beh",
        "age": "47",
        "company": "Fuseproject",
        "role": "Founder"
      }
    ]
  },
  {
    "category": "Motors",
    "shortname": "mot",
    "icon": "fa-car",
    "cards": [
      {
        "name": "Elon Musk",
        "shortname": "E_Musk",
        "age": "43",
        "company": "Tesla Motors",
        "role": "CEO"
      }
    ]
  },
  {
    "category": "Football",
    "shortname": "foot",
    "icon": "fa-futbol-o",
    "cards": [
      {
        "id": "card-1",
        "name": "Sir Alex Ferguson",
        "shortname": "A_Fer",
        "age": "73",
        "company": "N/A",
        "role": "Retired"
      }
    ]
  },
  {
    "category": "Law",
    "shortname": "law",
    "icon": "fa-gavel",
    "cards": [
      {
        "id": "card-1",
        "name": "Harvey Specter",
        "shortname": "H_Spec",
        "age": "43",
        "company": "Pearson Specter Litt",
        "role": "Name Partner"
      }
    ]
  }
]

HTML代码：

<!-- Slider Container -->
    <div class="slider-container">
        <!-- Search Content  -->
        <!-- controls: true -->
        <div class="content-results bxslider" 
        bx-slider="mode: 'horizontal', pager: true, nextSelector: '#next', prevSelector: '#prev', nextText: '<i class=\'fa fa-chevron-right\'></i>', prevText: '<i class=\'fa fa-chevron-left\'></i>', minSlides: 1, maxSlides:1, infiniteLoop: true, adaptiveHeight: true, hideControlOnEnd: false">
            <!-- Employee -->
            <div class="cards-container" 
            ng-repeat="item in filtered = ( employees | filter: query | orderBy:empOrder:direction )"
            notify-repeat-finished>
                <div class="category" ng-animate="'animate'" >
                    <div class="category-title">
                        <h1 class="title-cat"><i class="fa {{item.icon}}"></i>&nbsp;{{ item.category }}</h1>
                    </div>
                    <div class="category-cards-container">
                        <div class="employee-card card" ng-repeat="employee in filtered = (item.cards | filter: query | orderBy:empOrder:direction )" dom-manipulation>
                            <!-- Front Card -->
                            <div class="front">
                                <div class="pic-container">
                                    <img ng-src="../static/images/placeholders/{{ employee.shortname }}.jpg" class="emp-pic" alt="Photo of {{ employee.name }}">
                                    <h3 class="emp-name">{{ employee.name }}</h3>
                                <div class="darken"></div>
                                </div>
                                <ul class="emp-details">
                                    <li class="detail emp-age">
                                        <h5>Age: <small>{{ employee.age }}</small></h5>
                                    </li>
                                    <li class="detail emp-role">
                                        <h5>Role: <br><small>{{ employee.role }}</small></h5>
                                    </li>
                                    <li class="detail emp-company">
                                        <h5>Company: <br><small>{{ employee.company }}</small></h5>
                                    </li>
                                </ul>
                            </div>
                            <!-- END Front Card -->
                            <!-- Back Card -->
                            <div class="back">
                                <div id="map-load">
                                    <i class="fa fa-map-marker"></i>
                                </div>
                                <div id="maps-container">
                                    <div id="googleMap"></div>
                                </div>
                                <i class="fa fa-times"></i>
                            </div>
                            <!-- END Back Card -->
                        </div>
                    </div>
                </div>
                <!-- No Matches -->
                <div class="no-match" ng-show="filtered.length == 0">
                    <h3 class="no-matchText">Your search provides no matches!</h3>
                </div>
                <!-- END No Matches -->
            </div>
            <!-- END Employee -->
        </div>
        <!-- END Search Content  -->
        <!-- Next & Previous Buttons -->
        <div class="btn-nextprev">
            <div class="next-container">
                <a href="" class="btn btn-next" id="next">
                </a>
            </div>
            <div class="prev-container">
                <a href="" class="btn btn-prev" id="prev">
                </a>
            </div>
        </div>
        <!-- END Next & Previous Buttons -->
    </div>
    <!-- END Slider Container -->

AngularJS:

控制器

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.empOrder = 'name';
    }).
    error(function(){
        console.log("JSON file NOT loaded");
    });

}]);

编辑更新控制器

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.empOrder = 'name';

        //Next & Previous Button Category Label
        $scope.getNextCategoryIndex = function(currentIndex){
            var nextIndex = currentIndex+1;
            if( nextIndex >= $scope.employees.length ){
                //move to start if at list end
                nextIndex = 0;
            }
            return nextIndex;
        }

        $scope.getPrevCategoryIndex = function(currentIndex){
            var prevIndex = currentIndex+1;
            if( prevIndex < 0 ){
                //move to the last index, if already at the start
                prevIndex = $scope.employees.length - 1;
            }
            return prevIndex;
        }

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

}]);

更新了下一个/前一个按钮

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

Answer 1

我可能会这样做:为控制器创建函数以获取前两个索引和下一个索引(处理索引溢出)：

$scope.getNextCategoryIndex = function(currentIndex) {
  var nextIndex = currentIndex+1;
  if (nextIndex >= $scope.employees.length) {
    // move over to start if we already were at the end of the list
    nextIndex = 0;
  }
  return nextIndex;
}

$scope.getPrevCategoryIndex = function(currentIndex) {
  var prevIndex = currentIndex+1;
  if (prevIndex < 0) {
    // move over to the last index, if we already are at the start
    prevIndex = $scope.employees.length - 1;
  }
  return prevIndex;
}

然后，在HTML调用这些函数时，使用$index (ng-重复的当前索引，有关更多细节，请参见用于AngularJS的ngRepeat文档 )作为参数：

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

Answer 2

您需要的代码应该是：

{{employees[$index - 1].category}} //For the prev
{{employees[$index + 1].category}} //For the next

Answer 3

最新更新(09-2015年4月)：

我现在已经能够实现我想要的，点击按钮相关的功能运行和循环通过类别名称。现在要添加的另一件事是，这些按钮是同步运行的。

控制器

//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;
        }
    };

<!-- Next & Previous Buttons -->
        <div class="btn-nextprev">
            <div class="next-container">
                <a href="" class="btn btn-next" id="next" 
                ng-click="getNext()"> 

                </a>
                {{ employees[nextCat].category }}
            </div>
            <div class="prev-container">
                <a href="" class="btn btn-prev" id="prev"
                ng-click="getPrev()">
                </a>
                {{ employees[prevCat].category }}
                <!-- {{ employees[prevCat].category }} -->
            </div>
        </div>
        <!-- END Next & Previous Buttons -->

更新：--这仍然不是一个可行的解决方案。我在技术上能够实现所需的东西，但是我仍然需要使用position: fixed。这意味着类别标签随之消失。

现在，我将尝试实现这一点，而不是在ng-重复和使用ng-单击它将迭代到下一个类别名称。希望这将是解决方案，我将更新任何成功/失败。

更新：

我还没有找到我的最佳解决方案，不过，我目前的解决办法是使用@j芥onen的解决方案。

在bxSlider之外，我有自定义箭头(如果我把这些箭头放在里面，就会出现箭头不能在页面上重复的问题--我相信，当它有position:fixed时，就会出现问题)。

再重复一遍，我包括.

{{ employees[getNextCategoryIndex($index)].category }}

然后，我将被要求做一些CSS，这样才能使它看起来像是显示为下一个/前一个按钮的一部分。同样，如果使用position: fixed，它们将变得不可见。