AngularJS＆安培; JSON - 从previous和放大器获得的价值;下一个对象 [英] AngularJS & JSON - Obtain Value from Previous & Next Object
本文介绍了AngularJS＆安培; JSON - 从previous和放大器获得的价值;下一个对象的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
背景：的
我已经创建了一个AngularJS测试应用程序，它从一个JSON文件，该文件被分成类别，并在每个类别是通过NG-重复显示雇员卡获得的数据。然后这些类别可以被看作利用（使用bxSlider）一个滑块。
目标：的
随着bxSlider你可以使用自定义下一个/ previous按钮，我想要的东西，实现了动态显示在Next / previous按钮相关的类别名称（请参见注释链接如下 - 我的级别不允许我发表图片）。
例如：的 上鉴于目前的类别是技术部门，previous按钮，然后可能会显示汽车公司的部门和下一个按钮可以显示法律部门。的
据我所知，低于code将使我访问类别名称技术。然而，这需要在一个动态性工作要做。
{{员工[0] .category}}
下面这个我将包括所有我认为相关code。
JSON文件
[
{
类别：技术
短名称：高科技，
图标：FA-桌面
卡：
{
ID：卡1，
名：乔治Sofroniou
短名称：G_Sof
时代：23，
公司：Pirean有限公司
角色：研究生UI开发
}，
{
ID：卡2，
名：史蒂夫·乔布斯
短名称：S_Jobs
时代：56（死），
公司：苹果公司，
角色：前CEO
}，
{
ID：卡3
名：马克·扎克伯格
短名称：M_Zuck
时代：30，
公司：脸谱，
角色：CEO
}，
{
ID：卡4，
名：蒂姆·库克
短名称：T_Cook
时代：54
公司：苹果公司，
角色：CEO
}，
{
ID：卡5
名：强尼伊夫
短名称：J_Ive
时代：48，
公司：苹果公司，
角色：设计的高级副president
}，
{
ID：卡6，
名：玛丽莎梅耶
短名称：M_May
时代：39，
公司：雅虎，
角色：CEO
}，
{
ID：卡7
名：伊夫贝哈尔
短名称：Y_Beh
时代：47，
公司：Fuseproject
角色：方正
}
]
}，
{
类别：汽车，
短名称：MOT
图标：FA-车，
卡：
{
名：伊隆·马斯克
短名称：E_Musk
时代：43，
公司：特斯拉汽车
角色：CEO
}
]
}，
{
类别：足球
短名称：脚，
图标：FA-futbol的-O，
卡：
{
ID：卡1，
名：弗格森
短名称：A_Fer
时代：73
公司：N / A，
角色：退役
}
]
}，
{
类别：公司法，
短名称：法，
图标：FA-木槌
卡：
{
ID：卡1，
名：哈维幽灵
短名称：H_Spec
时代：43，
公司：皮尔逊斯佩克特利特
角色：名合作伙伴
}
]
}
]
HTML code：
＆LT;！ - 滑块容器 - ＆GT;
＆LT; DIV CLASS =滑块容器＆GT;
＆LT;！ - 搜索内容 - ＆GT;
＆LT; - 控制：真 - ＆GT;
＆LT; DIV CLASS =内容结果bxslider
BX滑块=模式：横向，寻呼机：真的，nextSelector：#next'，prevSelector：＃preV'，nextText：'＆LT; I类= \\'发FA-chevron-正确的\\'＆GT;＆LT; / I＆GT;'，prevText：'＆LT; I类= \\'发FA-字形左\\'＆GT;＆LT; / I＆GT;'，minSlides：1，maxSlides：1， infiniteLoop：真的，adaptiveHeight：真，hideControlOnEnd：假＆GT;
＆LT;！ - 员工 - ＆GT;
＆LT; DIV CLASS =卡容器
NG-重复=在过滤=项目（员工|过滤器：查询|排序依据：empOrder：方向）
通知-重复成品＆GT;
＆LT; DIV CLASS =类别NG-动画='动画'＆GT;
＆LT; DIV CLASS =类别标题＆GT;
＆LT; H1类=称号猫＆GT;＆LT; I类=发{{item.icon}}＆GT;＆LT; / I＆GT;＆安培; NBSP; {{item.category}}＆LT; / H1＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =类卡容器＆GT;
＆LT; DIV CLASS =员工卡牌NG-重复=员工在过滤=（item.cards |过滤器：查询|排序依据：empOrder：方向）DOM操纵＆GT;
＆LT;！ - 接待卡 - ＆GT;
＆LT; DIV CLASS =前＆GT;
＆LT; DIV CLASS =PIC-容器＆GT;
＆LT; IMG NG-SRC =../静态/图像/占位符/ {{employee.shortname}} JPG。阶级=EMP-PICALT =照片{{employee.name}}＆GT;
＆LT; H3类=EMP-名＆GT; {{employee.name}}＆LT; / H3 GT＆;
＆LT; DIV CLASS =变暗＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; UL类=EMP-细节＆GT;
＆LT;李班=细节EMP-时代＆GT;
＆LT;＆H5 GT;年龄：其中;小＆GT; {{employee.age}}＆LT; /小＆GT;＆LT; / H5＆GT;
＆LT; /李＆GT;
＆LT;李班=细节EMP-角色＆GT;
＆LT;＆H5 GT;作用：其中; BR＆GT;＆LT;小＆GT; {{employee.role}}＆LT; /小＆GT;＆LT; / H5＆GT;
＆LT; /李＆GT;
＆LT;李班=细节EMP-公司＆GT;
＆LT;＆H5 GT;公司：其中; BR＆GT;＆LT;小＆GT; {{employee.company}}＆LT; /小＆GT;＆LT; / H5＆GT;
＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
＆LT;！ - END接待卡 - ＆GT;
＆LT;！ - 回卡 - ＆GT;
＆LT; DIV CLASS =后面＆GT;
＆LT; DIV ID =地图加载＆GT;
＆LT; I类=发FA-地图标记＆GT;＆LT; I＆GT /;
＆LT; / DIV＆GT;
＆LT; DIV ID =地图容器＆GT;
＆LT; DIV ID =GoogleMap的＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; I类=发发次＆GT;＆LT; / I＆GT;
＆LT; / DIV＆GT;
＆LT;！ - END返回卡 - ＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; - ！不匹配 - ＆GT;
＆LT; DIV CLASS =不匹配的NG-秀=filtered.length == 0＆GT;
＆LT; H3类=无matchText＆GT;您的搜索不提供匹配＆LT;！/ H3 GT＆;
＆LT; / DIV＆GT;
＆LT;！ - 到底有没有匹配 - ＆GT;
＆LT; / DIV＆GT;
＆LT;！ - END员工 - ＆GT;
＆LT; / DIV＆GT;
＆LT;！ - END搜索内容 - ＆GT;
＆LT;！ - 下一个＆放大器; previous按钮 - ＆GT;
＆LT; DIV CLASS =BTN-NEXT preV＆GT;
＆LT; DIV CLASS =下一个容器＆GT;
＆所述; A HREF =类=BTN BTN-下ID =下一个＆GT;
＆所述; / A＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =preV-容器＆GT;
所述＆; A HREF =类=BTN btn- preVID =preV＆GT;
＆所述; / A＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT;！ - END下一个＆安培; previous按钮 - ＆GT;
＆LT; / DIV＆GT;
＆LT;！ - END滑块容器 - ＆GT;
AngularJS：
控制器的
VAR personControllers = angular.module（'personControllers'，['ngAnimate']）;// PersonSearch控制器
personControllers.controller（'PersonList'，['$范围，$ HTTP，
功能（$范围，$ HTTP）{ $ http.get（'../静态/脚本/ data2.json'）。
成功（功能（数据）{
的console.log（JSON文件中加载）;
的console.log（数据）;
$ scope.employees =数据;
//$scope.empOrder ='名';
}）。
错误（函数（）{
的console.log（JSON文件未加载）;
}）;}]）;
修改
更新控制器的
VAR personControllers = angular.module（'personControllers'，['ngAnimate']）;// PersonSearch控制器
personControllers.controller（'PersonList'，['$范围，$ HTTP，
功能（$范围，$ HTTP）{ $ http.get（'../静态/脚本/ data2.json'）。
成功（功能（数据）{
的console.log（JSON文件中加载）;
的console.log（数据）;
$ scope.employees =数据;
//$scope.empOrder ='名'; //下一个＆安培; previous按钮类别标签
$ scope.getNextCategoryIndex =功能（CURRENTINDEX）{
变种nextIndex = CURRENTINDEX + 1;
如果（nextIndex＆GT; = $ scope.employees.length）{
//移动到开始，如果在列表末尾
nextIndex = 0;
}
返回nextIndex;
} $ scope.get prevCategoryIndex =功能（CURRENTINDEX）{
VAR prevIndex = CURRENTINDEX + 1;
如果（prevIndex℃，）{
//在开始移动到最后一个索引，如果已经
prevIndex = $ scope.employees.length - 1;
}
返回prevIndex;
} }）。
错误（函数（）{
的console.log（JSON文件未加载）;
}）;}]）;
更新下一首/ previous按钮的
＆LT;！ - 下一个＆放大器; previous按钮 - ＆GT;
＆LT; DIV CLASS =BTN-NEXT preV＆GT;
＆LT; DIV CLASS =下一个容器＆GT;
＆所述; A HREF =类=BTN BTN-下ID =下一个＆GT;
{{员工[getNextCategoryIndex（$指数）。类}}
＆所述; / A＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =preV-容器＆GT;
所述＆; A HREF =类=BTN btn- preVID =preV＆GT;
{{员工[获取prevCategoryIndex（$指数）。类}}
＆所述; / A＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT;！ - END下一个＆安培; previous按钮 - ＆GT;
解决方案
我可能会做这样的事情：创建函数到控制器，以获得$ P $ pvious旁边指数（处理指数溢出）：
$ scope.getNextCategoryIndex =功能（CURRENTINDEX）{
变种nextIndex = CURRENTINDEX + 1;
如果（nextIndex＆GT; = $ scope.employees.length）{
//移到开始，如果我们已经是在列表的末尾
nextIndex = 0;
}
返回nextIndex;
}$ scope.get prevCategoryIndex =功能（CURRENTINDEX）{
VAR prevIndex = CURRENTINDEX + 1;
如果（prevIndex℃，）{
//移到最后一个指标，如果我们已经是在开始
prevIndex = $ scope.employees.length - 1;
}
返回prevIndex;
}
然后在HTML调用使用 $指数的那些功能（NG-重复当前索引，看到的为ngRepeat 了解更多详细信息）作为参数AngularJS文档：
＆LT;！ - 下一个＆放大器; previous按钮 - ＆GT;
＆LT; DIV CLASS =BTN-NEXT preV＆GT;
＆LT; DIV CLASS =下一个容器＆GT;
＆所述; A HREF =类=BTN BTN-下ID =下一个＆GT;
{{员工[getNextCategoryIndex（$指数）。类}}
＆所述; / A＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =preV-容器＆GT;
所述＆; A HREF =类=BTN btn- preVID =preV＆GT;
{{员工[获取prevCategoryIndex（$指数）。类}}
＆所述; / A＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT;！ - END下一个＆安培; previous按钮 - ＆GT;
Background: I have created an AngularJS test app which, obtains data from a JSON file, which is separated into categories and within each category is an employee card which is displayed through ng-repeat. These categories can then be viewed utilising a slider (using bxSlider).
Aim: With bxSlider you can use custom Next/Previous buttons, what I wanted to achieve was to dynamically display the relevant category names in the Next/Previous buttons (please see annotation link below - my level does not allow me to post images).
Website Category Slider Wireframe
For example: the current category on view is the 'Technology' department, the previous button may then show 'Motors' department and the next button may show 'Law' department.
I understand that the code below would allow me to access the Category name 'Technology'. However this needs to be done in a dynamic nature.
{{employees[0].category}}
Below this I will include all what I believe to be relevant code.
JSON file:
[
{
"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 Code:
<!-- 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> {{ 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");
});
}]);
EDIT Updated 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");
});
}]);
Updated Next/Previous Buttons
<!-- 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 -->
解决方案
I would probably do something like this: create functions to your controller to get the previous and next indexes (to handle the index overflows):
$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;
}
And then in the HTML call those functions using $index (the current index of ng-repeat, see AngularJS documentation for ngRepeat for more details) as parameter:
<!-- 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 -->
这篇关于AngularJS＆安培; JSON - 从previous和放大器获得的价值;下一个对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
