AngularJS NG重复键,值对访问对组由多个领域的关键多个、领域、关键、AngularJS

2023-09-14 00:19:29 作者:如歌

我新的角度,想学会处理问题的最好办法。我想访问由多个列分组我第一次NG-重复键。

\r\r

<表格的宽度=100%的风格=文本对齐:中心;数据角色=表数据模式=级=UI响应UI阴影>\r<&THEAD GT;\r&所述; TR>\r<第i ID和LT; /第i\r<第i个课程和LT; /第i\r<第i个模块< /第i\r<第i个受试对象; /第i\r<第i TOC< /第i\r<第i章< /第i\r<第i个活动完成< /第i\r<第i个开始< /第i\r<第i结束< /第i\r<第i花费时间和LT; /第i\r< / TR>\r< / THEAD>\r< TBODY NG重复=(键,值)会议| GROUPBY:'当然','模块','主题','TOC','章']ID =tblSessionRpt>\r< TR NG-的init =$指数== 0 isOpen会= TRUE:isOpen会=假>\r&所述; TD>\r<跨度NG点击=isOpen会= isOpen会!的风格=光标:指针>\r<跨度NG秀=isOpen会!>\r&安培; NBSP; +功放; NBSP;\r<跨度> {{$指数+ 1}}< / SPAN>\r< / SPAN>\r<跨度NG秀=isOpen会>\r&安培; NBSP; - &安培; NBSP;\r<跨度> {{$指数+ 1}}< / SPAN>\r< / SPAN>\r< / SPAN>\r< / TD>\r&所述; TD> {{key.course}}< / TD>\r&所述; TD> {{key.module}}< / TD>\r&所述; TD> {{key.subject}}< / TD>\r&所述; TD> {{key.toc}}< / TD>\r&所述; TD> {{key.chapter}}< / TD>\r\r< TD合并单元格=4ALIGN =正确> < / TD>\r< / TR>\r< TR NG重复=会议的价值NG秀=isOpen会>\r< TD colspan值='6'> &安培; NBSP;< / TD>\r&所述; TD> {{session.done}}< / TD>\r&所述; TD> {{session.start}}< / TD>\r&所述; TD> {{session.end}}< / TD>\r&所述; TD> {{session.timespent}}< / TD>\r< / TR>\r< / TBODY>\r< /表>

\r\r\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    }]; 
angularjs 总结 一

然后循环在你的模板,并添加NG-点击

 < TR NG重复=山坳中COLSNG点击=onHeadingClicked(COL)>    {{col.name}}< / TR> 

然后创建排序数据的 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">
						&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>

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

 
精彩推荐