Javascript 安圭拉酒店；JSON-从以前的&；中获取值；下一个目标

背景： 我创建了一个AngularJS测试应用程序，它从一个JSON文件中获取数据，该文件分为多个类别，每个类别中都有一张员工卡，通过ng repeat显示。然后可以使用滑块（使用bxSlider）查看这些类别

目标： 使用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 -->

编辑 更新控制器

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

var personControllers=angular.module（'personControllers'，['ngAnimate']）；
//个人搜索控制器
personControllers.controller（'PersonList'，['$scope'，'$http'，'，
函数（$scope，$http）{
$http.get（'../static/scripts/data2.json'）。
成功（功能（数据）{
log（“加载的JSON文件”）；
控制台日志（数据）；
$scope.employees=数据；
//$scope.empOrder='name'；
//下一个和上一个按钮类别标签
$scope.getNextCategoryIndex=函数（currentIndex）{
var nextIndex=currentIndex+1；
如果（nextIndex>=$scope.employees.length）{
//如果在列表末尾，则移动到“开始”
nextIndex=0；
}
返回下一个索引；
}
$scope.getPrevCategoryIndex=函数（currentIndex）{
var prevIndex=currentIndex+1；
如果（指数<0）{
//移动到最后一个索引（如果已在开始处）
prevIndex=$scope.employees.length-1；
}
回归指数；
}
}).
错误（函数（）{
log（“未加载JSON文件”）；
});
}]);

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

---

您需要的代码应该是：

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

---

您需要的代码应该是：

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

---

我可能会这样做：为控制器创建函数以获取上一个和下一个索引（处理索引溢出）：

---

我可能会这样做：为控制器创建函数以获取上一个和下一个索引（处理索引溢出）：

最新更新（2015年4月9日）：

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

我现在已经能够实现我想要的，只要点击按钮，相关函数就会运行并循环类别名称。现在还有一件事需要补充，那就是按钮是同步运行的

控制器

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

//下一个和上一个按钮类别标签
$scope.i=0；
$scope.j=$scope.employees.length；
$scope.nextCat=$scope.i+1；
$scope.prevCat=$scope.j-1；
$scope.getNext=函数（）{
//log（$scope.nextCat）；
$scope.nextCat++；
如果（$scope.nextCat>=$scope.employees.length）{
$scope.nextCat=0；
}
$scope.prevCat++；
如果（$scope.prevCat>=$scope.employees.length）{
$scope.prevCat=0；
}
};
$scope.getPrev=函数（）{
//log（$scope.nextCat）；
$scope.prevCat--；
如果（$scope.prevCat<0）{
$scope.prevCat=$scope.employees.length-1；
}
$scope.nextCat--；
如果（$scope.nextCat<0）{
$scope.nextCat=$scope.employees.length-1；
}
};

HTML

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

{{employees[nextCat].category}
{{employees[prevCat].category}

---

---

更新： 这仍然不是一个可行的解决方案。我在技术上能够达到要求，但是我仍然需要使用

位置：fixed

。这意味着类别标签将消失

我现在要尝试并实现这一点，而不是在ng repeat中使用ng click，它将迭代到下一个类别名称。希望这将是解决方案，我将在任何成功/失败时更新

更新：

我还没有找到我的最佳解决方案，但是，我目前的解决方案利用了@jmustonen的解决方案

在bxSlider之外，我有自定义箭头（如果我将这些箭头放在里面，则箭头在页面之间不重复会出现问题-我相信当它有

位置：fixed

时会出现问题）

然后在我的ng重复中，我包括

{{employees[getNextCategoryIndex（$index）].category}

然后，我将被要求做一些CSS，以使其显示为下一个/上一个按钮的一部分。如果使用了

位置：fixed

，这些将再次不可见。

最新更新（2015年4月9日）：

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

我现在已经能够实现我想要的，只要点击按钮，相关函数就会运行并循环类别名称。现在还有一件事需要补充，那就是按钮是同步运行的

控制器

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

//下一个和上一个按钮类别标签
$scope.i=0；
$scope.j=$scope.employees.length；
$scope.nextCat=$scope.i+1；
$scope.prevCat=$scope.j-1；
$sc