AngularJS &JSON - 从上一个 & 获取值下一个对象 [英] AngularJS & JSON - Obtain Value from Previous & Next Object

问题描述

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

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

网站类别滑块线框

例如: 当前查看的类别是技术"部门，上一个按钮可能会显示汽车"部门，下一个按钮可能会显示显示法律"部门.

我了解下面的代码将允许我访问类别名称技术".然而，这需要以动态的方式完成.

{{employees[0].category}}

在此之下，我将包含所有我认为相关的代码.

JSON 文件:

<预><代码>[{"category": "技术","shortname": "技术","icon": "fa-desktop",卡片":[{"id": "card-1","name": "乔治·索弗罗尼欧","shortname": "G_Sof","年龄": "23","company": "Pirean Ltd.","role": "研究生 UI 开发人员"},{"id": "card-2","name": "史蒂夫·乔布斯","shortname": "S_Jobs","age": "56 (已故)","company": "苹果公司",角色":前任CEO"},{"id": "card-3","name": "马克·扎克伯格","shortname": "M_Zuck","年龄": "30","公司": "脸书",角色":CEO"},{"id": "card-4","name": "蒂姆·库克","shortname": "T_Cook","年龄": "54","company": "苹果公司",角色":CEO"},{"id": "card-5","name": "乔尼·艾夫","shortname": "J_Ive","年龄": "48","company": "苹果公司",角色":设计高级副总裁"},{"id": "card-6","name": "玛丽莎梅耶","shortname": "M_May","年龄": "39","company": "雅虎！",角色":CEO"},{"id": "card-7","name": "伊夫·比哈尔","shortname": "Y_Beh","年龄": "47","company": "Fuseproject",角色":创始人"}]},{"category": "电机","shortname": "mot","icon": "fa-car",卡片":[{"name": "埃隆·马斯克","shortname": "E_Musk","年龄": "43","company": "特斯拉汽车",角色":CEO"}]},{"category": "足球","shortname": "脚","icon": "fa-futbol-o",卡片":[{"id": "card-1","name": "亚历克斯·弗格森爵士","shortname": "A_Fer","年龄": "73","公司": "不适用",角色":退休"}]},{"类别": "法律","shortname": "法律","icon": "fa-gavel",卡片":[{"id": "card-1","name": "哈维幽灵","shortname": "H_Spec","年龄": "43","company": "Pearson Spectre Litt","role": "名称合作伙伴"}]}]

HTML 代码:

<div class="slider-container"><!-- 搜索内容--><!-- 控制:真--><div class="content-results bxslider"bx-slider="mode: 'horizo​​ntal', 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: 假"><!-- 员工--><div class="cards-container"ng-repeat="过滤后的项目 = (员工 | 过滤器: 查询 | orderBy:empOrder:direction )"通知重复完成><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 class="category-cards-container"><div class="employee-card card" ng-repeat="employee in Filtered = (item.cards | filter: query | orderBy:empOrder:direction )" dom-manipulation><!-- 前卡--><div class="front"><div class="pic-container"><img ng-src="../static/images/placeholders/{{employee.shortname }}.jpg" class="emp-pic" alt="{{employee.name }}的照片"><h3 class="emp-name">{{employee.name }}</h3><div class="变暗"></div>

<ul class="emp-details"><li class="detail emp-age"><h5>年龄:<small>{{employee.age }}</small></h5><li class="detail emp-role"><h5>角色:<br><small>{{employee.role }}</small></h5><li class="detail emp-company"><h5>公司:<br><small>{{employee.company }}</small></h5>

<!-- 结束前卡--><!-- 背卡--><div class="back"><div id="地图加载"><i class="fa fa-map-marker"></i>

<div id="maps-container"><div id="googleMap"></div>