mardi 5 mai 2015

AngularJS double ng-repeat

I'm working on accordion group and have two ng-repeat. Outer one repeats weeks from current week to a specific date. Inner repeats working hours sever days in each week.

function expand(week.id) is to call database and prepare data for variable "hour".

My problem is that when I click on one accordion-heading to show data in week#1, the rest of all other weeks(accordions) also show the same data, which makes this process very slow.

How could I just render the trs under the heading where I clicked? E.g My scenario is when I click on heading of week#1, only trs under week#1 are rendered.

Could anyone help me with this?

  <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>

Aucun commentaire:

Enregistrer un commentaire