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 ie '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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.