AngularJS NG重复键，值对访问对组由多个领域的关键 [英] AngularJS ng-repeat key, value pair access key on group by multiple fields
本文介绍了AngularJS NG重复键，值对访问对组由多个领域的关键的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我新的角度，想学会处理问题的最好办法。
我想访问由多个列分组我第一次NG-重复键。
\r
\r\r
\r＆LT;表格的宽度=100％的风格=文本对齐：中心;数据角色=表数据模式=级=UI响应UI阴影＆GT;\r
＆LT;＆THEAD GT;\r
＆所述; TR＆GT;\r
＆LT;第i ID和LT; /第i\r
＆LT;第i个课程和LT; /第i\r
＆LT;第i个模块＆LT; /第i\r
＆LT;第i个受试对象; /第i\r
＆LT;第i TOC＆LT; /第i\r
＆LT;第i章＆LT; /第i\r
＆LT;第i个活动完成＆LT; /第i\r
＆LT;第i个开始＆LT; /第i\r
＆LT;第i结束＆LT; /第i\r
＆LT;第i花费时间和LT; /第i\r
＆LT; / TR＆GT;\r
＆LT; / THEAD＆GT;\r
＆LT; TBODY NG重复=（键，值）会议| GROUPBY：'当然'，'模块'，'主题'，'TOC'，'章']ID =tblSessionRpt＆GT;\r
＆LT; TR NG-的init =$指数== 0 isOpen会= TRUE：isOpen会=假＆GT;\r
＆所述; TD＆GT;\r
＆LT;跨度NG点击=isOpen会= isOpen会！的风格=光标：指针＆GT;\r
＆LT;跨度NG秀=isOpen会！＆GT;\r
＆安培; NBSP; +功放; NBSP;\r
＆LT;跨度＆GT; {{$指数+ 1}}＆LT; / SPAN＆GT;\r
＆LT; / SPAN＆GT;\r
＆LT;跨度NG秀=isOpen会＆GT;\r
＆安培; NBSP; - ＆安培; NBSP;\r
＆LT;跨度＆GT; {{$指数+ 1}}＆LT; / SPAN＆GT;\r
＆LT; / SPAN＆GT;\r
＆LT; / SPAN＆GT;\r
＆LT; / TD＆GT;\r
＆所述; TD＆GT; {{key.course}}＆LT; / TD＆GT;\r
＆所述; TD＆GT; {{key.module}}＆LT; / TD＆GT;\r
＆所述; TD＆GT; {{key.subject}}＆LT; / TD＆GT;\r
＆所述; TD＆GT; {{key.toc}}＆LT; / TD＆GT;\r
＆所述; TD＆GT; {{key.chapter}}＆LT; / TD＆GT;\r
\r
＆LT; TD合并单元格=4ALIGN =正确＆GT; ＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆LT; TR NG重复=会议的价值NG秀=isOpen会＆GT;\r
＆LT; TD colspan值='6'＆GT; ＆安培; NBSP;＆LT; / TD＆GT;\r
＆所述; TD＆GT; {{session.done}}＆LT; / TD＆GT;\r
＆所述; TD＆GT; {{session.start}}＆LT; / TD＆GT;\r
＆所述; TD＆GT; {{session.end}}＆LT; / TD＆GT;\r
＆所述; TD＆GT; {{session.timespent}}＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆LT; / TBODY＆GT;\r
＆LT; /表＆gt; \r
我的JSON数据是这样的：
$ scope.sessions = [
{
ID：3518，
名：内容，
做：快乐的歌
开始：2015年11月23日11:11，
结束：2015年11月23日11:11
timespent：0，
当然：K-12
模块：标准 - 1，
主题：英语，
TOC：单位 - 01
章：快乐的歌
内容：空
}，
{
ID：3520
名：内容，
做：快乐的歌
开始：2015年11月23日11:11，
结束：2015年11月23日11:12
timespent：0，
当然：K-12
模块：标准 - 1，
主题：印地文
TOC：单位 - 01
章：快乐的歌
内容：空
}，
{
ID：3522，
名：内容，
做：快乐的歌
开始：2015年11月23日11:13，
结束：2015年11月23日11:13
timespent：0，
当然：K-12
模块：标准 - 1，
主题：英语，
TOC：单位 - 01
章：快乐的歌
内容：空
}，
{
ID：3524，
名：内容，
做：快乐的歌
开始：2015年11月23日11:17，
结束：2015年11月23日11:17
timespent：0，
当然：K-12
模块：标准 - 1，
主题：马拉
TOC：单位 - 02
章：快乐的歌
内容：空
}，
{
ID：3537，
名：内容，
做：快乐的歌
开始：2015年11月23日11:47，
结束：2015年11月23日11:47
timespent：0，
当然：K-12
模块：标准 - 1，
主题：英语，
TOC：单位 - 03
章：快乐的歌
内容：空
}];
我想通过多列，即'当然'，'模块'，'主题'，'TOC'，'章'
数据组在此先感谢：）
解决方案
排序的最有效的方式，我通常做的是首先把你列的排列在它的指定数据中的键
$ scope.cols = [
{
名：课程，
钥匙：当然
}，
{
名：模块，
钥匙：模块
}，
{
名：主题
钥匙：主题
}，
{
名：TOC
钥匙：TOC
}，
{
名：章
钥匙：章
}，
{
名：做过的事情，
钥匙：
}，
{
名：开始，
钥匙：开始
}，
{
名：结束，
钥匙：结束
}，
{
名：花费时间，
钥匙：timespent
}
];
然后循环在你的模板，并添加NG-点击
＆LT; TR NG重复=山坳中COLSNG点击=onHeadingClicked（COL）＆GT;
{{col.name}}
＆LT; / TR＆GT;
然后创建排序数据的 onHeadingClicked（）功能。
$ scope.onHeadingClicked =功能（COL）{
变种排序= [];
angular.forEach（会话功能（COL）{
//排序算法在这里
}）; $ scope.sessions =排序;
};
我不使用由于性能原因，每一次过滤器，过滤器的运行，从而所以它不是一个好主意，把它也执行该功能，所以很多很多次。使用过滤器只有简单的显示操作完成的。
希望这有助于
I'm new to Angular and would like to learn the best way to handle a problem. I want to access keys in my first ng-repeat grouped by multiple columns.
<table width="100%" style="text-align: center;" data-role="table" data-mode="" class="ui-responsive ui-shadow">
<thead>
<tr>
<th>Id</th>
<th>Course</th>
<th>Module</th>
<th>Subject</th>
<th>Toc</th>
<th>Chapter</th>
<th>Activity Done</th>
<th>Start</th>
<th>End</th>
<th>Time Spent</th>
</tr>
</thead>
<tbody ng-repeat="(key, value) in sessions | groupBy: ['course','module','subject','toc','chapter']" id="tblSessionRpt">
<tr ng-init="$index == 0 ? isOpen=true : isOpen=false">
<td>
<span ng-click="isOpen=!isOpen" style="cursor:pointer">
<span ng-show="!isOpen">
+
<span> {{ $index+1 }} </span>
</span>
<span ng-show="isOpen">
-
<span> {{ $index+1 }} </span>
</span>
</span>
</td>
<td> {{ key.course }} </td>
<td> {{ key.module }} </td>
<td> {{ key.subject }} </td>
<td> {{ key.toc }} </td>
<td> {{ key.chapter }} </td>
<td colspan='4' align="right"> </td>
</tr>
<tr ng-repeat="session in value" ng-show="isOpen">
<td colspan='6'> </td>
<td> {{ session.done }}</td>
<td> {{ session.start }}</td>
<td> {{ session.end }}</td>
<td> {{ session.timespent }}</td>
</tr>
</tbody>
</table>
My JSON data is like :
$scope.sessions=[
{
"id": 3518,
"name": "content",
"done": "A Happy Song",
"start": "2015-11-23 11:11",
"end": "2015-11-23 11:11",
"timespent": "0",
"course": "K-12",
"module": "Std - 1",
"subject": "English",
"toc": "Unit - 01",
"chapter": "A Happy Song",
"content": null
},
{
"id": 3520,
"name": "content",
"done": "A Happy Song",
"start": "2015-11-23 11:11",
"end": "2015-11-23 11:12",
"timespent": "0",
"course": "K-12",
"module": "Std - 1",
"subject": "Hindi",
"toc": "Unit - 01",
"chapter": "A Happy Song",
"content": null
},
{
"id": 3522,
"name": "content",
"done": "A Happy Song",
"start": "2015-11-23 11:13",
"end": "2015-11-23 11:13",
"timespent": "0",
"course": "K-12",
"module": "Std - 1",
"subject": "English",
"toc": "Unit - 01",
"chapter": "A Happy Song",
"content": null
},
{
"id": 3524,
"name": "content",
"done": "A Happy Song",
"start": "2015-11-23 11:17",
"end": "2015-11-23 11:17",
"timespent": "0",
"course": "K-12",
"module": "Std - 1",
"subject": "Marathi",
"toc": "Unit - 02",
"chapter": "A Happy Song",
"content": null
},
{
"id": 3537,
"name": "content",
"done": "A Happy Song",
"start": "2015-11-23 11:47",
"end": "2015-11-23 11:47",
"timespent": "0",
"course": "K-12",
"module": "Std - 1",
"subject": "English",
"toc": "Unit - 03",
"chapter": "A Happy Song",
"content": null
}];
I want to data group by multiple columns i.e. 'course','module','subject','toc','chapter'
Thanks in advance :)
解决方案
the most efficient way of sorting I usually do is to put your columns first in a array with it's designated keys in your data
$scope.cols = [
{
"name": "Course",
"key": "course"
},
{
"name": "Module",
"key": "module"
},
{
"name": "Subject"
"key": "subject"
},
{
"name": "Toc",
"key": "toc"
},
{
"name": "Chapter",
"key": "chapter"
},
{
"name": "Activity Done",
"key": ""
},
{
"name": "Start",
"key": "start"
},
{
"name": "End",
"key": "end"
},
{
"name": "Time Spent",
"key": "timespent"
}
];
then loop it in your template and add ng-click
<tr ng-repeat="col in cols" ng-click="onHeadingClicked(col)">
{{col.name}}
</tr>
then create the onHeadingClicked() function that sorts your data.
$scope.onHeadingClicked = function (col) {
var sorted = [];
angular.forEach(sessions, function (col) {
// Sorting algorithm here
});
$scope.sessions = sorted;
};
I don't use filters due to performance reasons, filter's run every time and thus executes that function so many many times so it would not a good idea putting it there. I use filters only if simple display manipulation is done.
Hope this helps
这篇关于AngularJS NG重复键，值对访问对组由多个领域的关键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
