我们使用angular js在正常的html表中显示事件。该表格如下所示
*-------------------------------*
| Time | Name |
*-------*-----------------------*
| 07:00 | xxxxxxxxxxx |
|-------| |
| 07:15 | |
|-------|-----------------------|
| 07:30 | xxxxxxxxxxxxxx |
|-------|-----------------------|
| 07:45 | |
|-------|-----------------------|
| 08:00 | |
|-------|-----------------------|
| 08:15 | xxxxxxxxxxxxxx |
|-------|-----------------------|
如果我点击隐藏免费广告位,则应该隐藏所有免费列并显示如下所示。如果行被合并,例如07,07:15,它应该只显示第一行。 (在json中隐藏所有类型= Free)
*-------------------------------*
| Time | Name |
*-------*-----------------------*
| 07:00 | xxxxxxxxxxx |
|-------|-----------------------|
| 07:30 | xxxxxxxxxxxxxx |
|-------|-----------------------|
| 08:15 | xxxxxxxxxxxxxx |
|-------|-----------------------|
代码
App.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.array = [
{ "StartTime": "07:00", "Type":"Booked", "Name": "xxxxxxxx", "Slots": ["07:00","07:15"] },
{ "StartTime": "07:30", "Type":"Blocked", "Name": "xxxxxxxx", "Slots": ["07:30"] },
{ "StartTime": "07:45", "Type":"Free", "Slots": ["07:45"] },
{ "StartTime": "08:00", "Type":"Free", "Slots": ["80:00"] },
{ "StartTime": "08:15", "Type":"Booked", "Name": "xxxxxxxx", "Slots": ["08:15"] }
];
});
的index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<script data-require="angular.js@*" data-semver="1.3.6" src="https://code.angularjs.org/1.3.6/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>
<body ng-Controller="MainCtrl">
<table border="1">
<thead>
<tr>
<th>Time</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="item in array">
<td>{{item.Slots[0]}}</td>
<td rowspan="{{item.Slots.length}}">{{item.Name}}</td>
</tr>
<tr ng-repeat="slot in item.Slots" ng-if="!$first" ng-repeat-end>
<td>{{slot}}</td>
</tr>
</tbody>
</table>
</body>
</html>
Plunker Link
答案 0 :(得分:1)
有关plunker的工作版本:
http://plnkr.co/edit/TXLSMx3TmurmMefdWGIW?p=info
为此,我使用boolean var来了解您是否要显示空闲插槽:
$scope.showFree = true;
$scope.changeView = function(){
$scope.showFree = !$scope.showFree;
}
使用此代码,如果Type是空闲的,我可以隐藏整行,或者当它是合并时,我可以隐藏第二行。为了隐藏在合并上,我使用你首先得到的$ first:
ng-hide="!$first && !showFree"