AngularJS ng-repeat 键，按多个字段分组的值对访问键 [英] AngularJS ng-repeat key, value pair access key on group by multiple fields

问题描述

我是 Angular 的新手，想学习处理问题的最佳方法.我想访问按多列分组的第一个 ng-repeat 中的键.

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">
						&nbsp; + &nbsp;
						<span> {{ $index+1 }} </span>
					</span>
					<span ng-show="isOpen">
						&nbsp; - &nbsp;
						<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'> &nbsp;</td>
			<td> {{ session.done }}</td>
			<td> {{ session.start }}</td>
			<td> {{ session.end }}</td>
			<td> {{ session.timespent }}</td>
		</tr>
	</tbody>
</table>

我的 JSON 数据如下:

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'

提前致谢:)

推荐答案

我通常做的最有效的排序方式是将列放在数组中，并在数据中指定键

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

然后在模板中循环并添加 ng-click

then loop it in your template and add ng-click

<tr ng-repeat="col in cols" ng-click="onHeadingClicked(col)">
    {{col.name}}
</tr>

然后创建对数据进行排序的 onHeadingClicked() 函数.

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.

希望能帮到你

这篇关于AngularJS ng-repeat 键，按多个字段分组的值对访问键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！