我正在研究手风琴组,并且有两次ng-repeat。外面一周从当前周到特定日期重复几周。内部重复工作时间每周工作时间。
function expand(week.id)是调用数据库并为变量“hour”准备数据。
我的问题是,当我点击一个手风琴标题来显示第1周的数据时,其他所有周(手风琴)的其余部分也显示相同的数据,这使得这个过程非常缓慢。
我怎样才能在我点击的标题下渲染trs?例如,我的情景是,当我点击第1周的标题时,只会呈现第1周的标题。
有人可以帮我吗?
<accordion-group ng-repeat="week in weeks">
<accordion-heading >
<span ng-click="expand(week.id)">{{week.firstday}}--{{week.lastday}}</span>
</accordion-heading>
<table class="table table-striped">
<thead>
<tr>
<th>Task</th>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
<th>Total</th>
</tr>
</thead>
<tbody id={{week.id}}>
<tr ng-repeat="hr in hour">
<td> <select class="form-control input-sm" ng-disabled="false"><option value="hr.task_name">{{hr.task_name}}</option></select></td>
<td><input type="number" min="0" ng-model="hr.sun" class="form-control" placeholder="Hours" ng-disabled="true"></td>
<td><input type="number" min="0" ng-model="hr.mon" class="form-control" placeholder="Hours" ng-disabled="true"></td>
<td><input type="number" min="0" ng-model="hr.tue" class="form-control" placeholder="Hours" ng-disabled="true"></td>
<td><input type="number" min="0" ng-model="hr.wed" class="form-control" placeholder="Hours" ng-disabled="true"></td>
<td><input type="number" min="0" ng-model="hr.thu" class="form-control" placeholder="Hours" ng-disabled="true"></td>
<td><input type="number" min="0" ng-model="hr.fri" class="form-control" placeholder="Hours" ng-disabled="true"></td>
<td><input type="number" min="0" ng-model="hr.sat" class="form-control" placeholder="Hours" ng-disabled="true"></td>
<td><span class="form-control">{{hr.sun+hr.mon+hr.tue+hr.wed+hr.thu+hr.fri+hr.sat}}</span></td>
</tr>
</tbody>
</table>
</accordion-group>
答案 0 :(得分:1)
小时的小时可能会使同一模型小时的所有内容都生成,在这种情况下,如果您可以将小时作为一周的属性,则需要将该模型与hr.hour中的hr分开。如果没有,你可以尝试像这样的ng-init,如果小时和星期相关,其中小时数而不是显示的小时数组是一个具有显示小时的数组数组:
<accordion-group ng-repeat="week in weeks" ng-init="weekIndex = $index">
<accordion-heading >
<span ng-click="expand(week.id)">{{week.firstday}}--{{week.lastday}}</span>
</accordion-heading>
<table class="table table-striped">
<thead>
<tr>
<th>Task</th>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
<th>Total</th>
</tr>
</thead>
<tbody id={{week.id}}>
<tr ng-repeat="hr in hours[weekIndex]">
<td> <select class="form-control input-sm" ng-disabled="false"><option value="hr.task_name">{{hr.task_name}}</option></select></td>
<td><input type="number" min="0" ng-model="hr.sun" class="form-control" placeholder="Hours" ng-disabled="true"></td>
<td><input type="number" min="0" ng-model="hr.mon" class="form-control" placeholder="Hours" ng-disabled="true"></td>
<td><input type="number" min="0" ng-model="hr.tue" class="form-control" placeholder="Hours" ng-disabled="true"></td>
<td><input type="number" min="0" ng-model="hr.wed" class="form-control" placeholder="Hours" ng-disabled="true"></td>
<td><input type="number" min="0" ng-model="hr.thu" class="form-control" placeholder="Hours" ng-disabled="true"></td>
<td><input type="number" min="0" ng-model="hr.fri" class="form-control" placeholder="Hours" ng-disabled="true"></td>
<td><input type="number" min="0" ng-model="hr.sat" class="form-control" placeholder="Hours" ng-disabled="true"></td>
<td><span class="form-control">{{hr.sun+hr.mon+hr.tue+hr.wed+hr.thu+hr.fri+hr.sat}}</span></td>
</tr>
</tbody>
</table>
</accordion-group>
答案 1 :(得分:0)
由于所有周都共享相同的变量hour
,因此展开一个标题会导致覆盖同一个变量,修改所有窗格的内部ng-repeat
内容。
相反,您需要在hour
中的每个week
对象上设置weeks
属性,或者您需要一个单独的对象/地图来存储与week.id
。
对于后者,在控制器的开头有以下行:
$scope.hours = {};
然后在expand()
函数中,填充$scope.hour
,而不是填充$scope.hours[weekId]
。
最后,将内部ng-repeat
表达式更改为:
hr in hours[week.id]