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

Question

背景:我创建了一个 AngularJS 测试应用程序，它从一个 JSON 文件中获取数据，该文件被分成几类，每个类别中都有一张通过 ng-repeat 显示的员工卡。然后可以使用 slider (使用 bxSlider)查看这些类别。

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

Website Category Slider Wireframe

例如: 当前显示的类别是“技术”部门，上一个按钮可能显示“汽车”部门，下一个按钮可能显示显示“法律”部门。

我知道下面的代码将允许我访问类别名称“技术”。然而，这需要以动态的方式完成。

{{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:

Controller

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

}]);

编辑更新 Controller

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

我可能会这样做:为您的 Controller 创建函数以获取上一个和下一个索引(以处理索引溢出):

$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-repeat 的当前索引，更多详细信息请参阅 AngularJS documentation for 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 -->